Vue.js中数组变动的检测详解

writable: true,
configurable: true
})
})

ok， 我们定义完了 array.js, 并作为模块导出，修改

Observer 

的实现：

export function Observer (value) {
 this.dep = new Dep()
 this.value = value
 // 如果是数组就更改其原型指向
 if (Array.isArray(value)) {
 value.__proto__ = arrayMethods
 this.observeArray(value)
 } else {
 this.walk(value)
 }
}
// 观测数据元素
Observer.prototype.observeArray = function (items) {
 for (let i = 0, l = items.length; i < l; i++) {
 observe(items[i])
 }
}

Observer 

修改完毕后，我们再看看

Watcher 

， 只需要改动其

update 

函数，

Watcher.prototype.update = function (dep) {
 console.log('2.update')
 const value = this.get()
 const oldValue = this.value
 this.value = value
 if (value !== this.value || value !== null) {
 this.cb.call(this.vm, value, oldValue)
 // 如果没有此函数， 会导致重复调用 $watch 回调函数。
 // 原因：数组变异过了，并对新数组也进行了观察，应该移除旧的观察者
 dep.subs.shift()
 }
}

结果：

const vm = new Vue({
 data: {
 b: [{a: 'a'}, {b: 'b'}] }
})
vm.$watch('b', (val) => {
 console.log('------我看到你们了-----')
})
vm.b.push({c: 'c'})
vm.b.pop({c: 'c'})
vm.b.push({c: 'c'})
// 结果：
// console.log('------我看到你们了-----')
// console.log('------我看到你们了-----')
// console.log('------我看到你们了-----')

总结

至此，我们已经实现对数组变动的检测。主要使用了Object.create()函数。希望这篇文章的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。