Vue2中无法检测到数组变动的原因及解决 Vue2中无法检测到数组变动的原

解决方法
为什么Vue2.0中监听不到两种数组的变化？
源码分析
Vue3.0

由于JavaScript 的限制，Vue 不能检测以下数组的变动：

当利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
当修改数组的长度时，例如：vm.items.length = newLength

var vm = new Vue({data: {items: ['a', 'b', 'c']}})vm.items[1] = 'x' // 不是响应性的vm.items.length = 2 // 不是响应性的

解决方法

手动添加监听// Vue.setVue.set(vm.items, indexOfItem, newValue)vm.$set(vm.items, indexOfItem, newValue)使用数组的变异方法，因为vue对数组的变异方法实现了响应式// Array.prototype.splicevm.items.splice(indexOfItem, 1, newValue)

为什么Vue2.0中监听不到两种数组的变化？
官方文档中对于这两点都是简要的概括为“由于JavaScript的限制”无法实现，而Object.defineProperty是实现检测数据改变的方案，那这个限制是指Object.defineProperty吗？
其实原因并不是因为Object.defineProperty()存在漏洞，而是出于性能问题的考虑。 Object.defineProperty 在数组中的表现和在对象中的表现是一致的，数组的索引就可以看做是对象中的 key 。