VUE2中数组修改无效问题

问题描述

例如：子组件中监听数组时，父组件中直接改变数组第n项的值时，子组件并未执行监听方法，即使使用深度监听的方式。

---

原因分析：

关键：vue的双向绑定原理

又称vue响应式原理，是vue的核心，双向数据绑定是通过数据劫持结合发布者订阅者模式的方式来实现的，通过Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变

而vue对于数组没有实现数据的绑定，但是监听了数组的方法，如push、pop、shift、unshift、splice、sort、reverse

---

解决方案：

所以组件的数组传参可以在父组件中添加方法，当方法改变后再进行传参，从而实现数组的监听方法。

也可以使用this.$set(array, index, data)

//这是个深度的修改，某些情况下可能导致你不希望的结果，因此最好还是慎用
this.dataArr = this.originArr
this.$set(this.dataArr, 0, {data: '修改第一个元素'})
console.log(this.dataArr)        
console.log(this.originArr)  //同样的 源数组也会被修改 在某些情况下会导致你不希望的结果