从依赖收集、数组依赖和侦听器谈 Vue2.x 源码

2023-12-09 01:26:33

数组依赖收集

1. 对象依赖收集的总结

在 Vue2.x 中，对象依赖收集是通过 Object.defineProperty() 方法来实现的。当一个对象的属性被访问时，该属性的 getter 函数会被调用，此时会将当前正在收集依赖的 Watcher 实例添加到该属性的 dep 属性上。当该属性的值发生改变时，该属性的 dep 属性上的所有 Watcher 实例都会被通知并执行更新操作。

2. 数组依赖收集的位置

数组依赖收集的位置主要有以下几个：

当对数组进行 push()、pop()、shift()、unshift()、splice() 等操作时，会调用 Dep.target 的 addDep() 方法，将当前正在收集依赖的 Watcher 实例添加到数组的 dep 属性上。
当对数组的索引属性进行赋值操作时，会调用 Dep.target 的 addDep() 方法，将当前正在收集依赖的 Watcher 实例添加到该索引属性的 dep 属性上。
当对数组的 length 属性进行赋值操作时，会调用 Dep.target 的 addDep() 方法，将当前正在收集依赖的 Watcher 实例添加到数组的 dep 属性上。

3. 数组和对象本身做依赖收集

当数组或对象本身作为响应式数据的一部分时，需要对其进行依赖收集。对于数组来说，可以使用 Object.defineProperty() 方法为数组的 length 属性添加一个 getter 函数，在 getter 函数中调用 Dep.target 的 addDep() 方法，将当前正在收集依赖的 Watcher 实例添加到数组的 dep 属性上。对于对象来说，可以使用 Object.keys() 方法获取对象的所有属性，然后对每个属性使用 Object.defineProperty() 方法添加一个 getter 函数，在 getter 函数中调用 Dep.target 的 addDep() 方法，将当前正在收集依赖的 Watcher 实例添加到该属性的 dep 属性上。

4. 数组中嵌套对象（对象或数组）的递归处理

当数组中嵌套了对象（对象或数组）时，需要对这些嵌套的对象（对象或数组）进行递归处理，以确保对所有响应式数据进行依赖收集。对于嵌套的对象，可以使用与数组本身类似的方式进行依赖收集。对于嵌套的数组，可以使用与数组本身类似的方式进行依赖收集，也可以使用 observe() 方法对嵌套的数组进行递归观察。