vue 中是如何检测数组变化

vue如何检测数组变化

理解：
1.使用函数劫持的方式，重写了数组的方法
2.vue 将 data 中的数据，进行了原型链重写，指向了自己定义的数组原型方法，这样当调用数组 api 的时候，可以通知依赖更新，如果数组中包含着引用类型，则会对数组中的引用类型再次进行监控。

那为什么说vue无法监听数组的变化尼，这又是怎么回事：

注意事项
由于 JavaScript 的限制， Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如： vm.items.length = newLength
为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果， 同时也将触发状态更新：
// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)
为了解决第二类问题，你可以使用 splice：
example1.items.splice(newLength)

这个问题最初的疑问就是上面的注意事项提到的，无法通过索引设置一个项，而Vue前面写的【由于javaScript的限制】会误导我们，因为实际上我们会发现通过Object.defineProperty(array,‘0’,{})来定义set和get是能够监听到数据变化的。这就跟vue的解释有冲突了，既然能监听，为什么又说由于JS限制，vue不能检测到。

其实除了数组的 新增或删除，以及length(这个属性的configurable为false，所以无法重新定义)的变动，是由于JS本身的限制无法监听，其他的是能被检测到的，只是vue没有这样做而已。

而vue.set()这个方法做的事，其实就是帮你做一次Object.defineProperty，可能考虑到性能方面，vue并没有在解析$data的时候就帮你做了这个操作。

总结：vue之所以无法监听数组的变化，原因就是受js的限制，上面注意事项中有提到，但是vue也有解决办法，可以通过vue.set()去解决，使其做响应式变化。