Vue源码学习之关于对Array的数据侦听实现(3)

// 即上述的 let childOb = !shallow && observe(val) ... if (childOb) { // 调用Observer实例上dep的depend()方法收集依赖 childOb.dep.depend() if (Array.isArray(value)) { // 调用 dependArray 函数逐个触发数组每个元素的依赖收集 dependArray(value) } }

另外我们在前面提到的拦截器中要使用Observer实例。

methodsToPatch.forEach(function (method) { ... // this表示当前被操作的数据 // 但是__ob__怎么来的? const ob = this.__ob__ ... // 重新Observe新增加的数组元素 if (inserted) ob.observeArray(inserted) // 发送变化通知 ob.dep.notify() ... })

思考上述的this.__ob__属性来自哪里?

export class Observer { constructor () { ... this.dep = new Dep() // 在vue上新增一个不可枚举的__ob__属性, 这个属性的值就是Observer实例 // 因此我们就可以通过数组数据__ob__获取Observer实例 // 进而获取__ob__上的dep def(value, '__ob__', this) ... } }

牢记所有的属性一旦被侦测了都会被打上一个__ob__的标记, 即表示是响应式数据。