设置断点

找到 reactive 的源码，分别在 get、set、has、deleteProperty 等处设置断点：

这样就可以看看内部的执行情况了。

length = 0

先看看 length = 0 的情况：

js

代码解读

复制代码

const arr = reactive([1,20]) const mydel = () => { arr.length = 0 console.log('arr', arr) }

跟踪断点，看看执行步骤：

set，length，0：修改 length 的属性值，调用原型，数组被清空了；（好突然）【没有触发 deleteProperty】，没有触发就是没有被执行吗？

步骤很简单，上来就是改 length 的值，然后数组就被清空了，只是 deleteProperty 并没有被触发，那么数组是怎么空的？

考虑到是拦截 set 后，使用 Reflect.set 调用原型，那么这种情况下，还会继续被拦截吗？

splice

js

代码解读

复制代码

const mydel2 = () => { const re = arr.splice(0, arr.length) console.log('arr', arr) console.log('re', re) }

再看看 splice 的执行顺序：

get，splice ，调用原型，无变化；get，length，调用原型，返回 长度（4）；// 第二个参数使用了length属性get，length，又被执行一次；get，constructor，调用原型； // 创建新数组，存放被删除的元素has，0，返回 true； // 开始拷贝get，0，返回第一个数组元素的值；has，1，返回 true；get，1，返回第一个数组元素的值；重复 length 次；deleteProperty，3 （最后一个），调用原型删除最后一个数组元素；// 开始删除元素重复 length 次，从后往前依次删除数组元素；set，length，0，调用原型，修改 属性值；

这就复杂多了，为啥呢？考虑到 splice 的功能，参考执行步骤可以猜猜：

首先，splice 不仅仅是删除元素，还会把被删除的数组元素返回，组成新的数组，所以，不能删了就完事了，需要先拷贝。而每次获取元素前，需要先判断是否有元素（has），然后才能拷贝（get）元素。然后不能全删，splice 可以删除一部分数组元素，所以需要从后往前一个元素一个元素删除。删除完成之后，才会修改 length 属性。小结

splice 非常灵活，可以删除部分数组元素，也可以添加新的数组元素，只是用来清空数组的话，有点大材小用了。

而 length = 0 就是简单粗暴的方法，既然要清空，那么直接归零就好。即使也是一个元素一个元素删除的，那么也没有拷贝数组的步骤。

原文链接：