Vue源码实现之watcher拾遗

Vue源码实现中的watcher拾遗主要包括以下几点：

新增参数：
- deps和newDeps：Vue源码中的watcher构造函数相较于之前的版本增加了deps和newDeps两个关键参数。这两个参数在数据更新时，尤其是渲染watcher的触发过程中，用于管理依赖的变化。
依赖管理：
- 依赖收集：当页面发生更改时，Vue会调用渲染watcher来重新构建虚拟DOM。这一过程中，需要解析模板中数据的变化，并为模板中使用的data属性建立依赖订阅。deps和newDeps用于管理这种依赖的添加和移除。
- 依赖移除：如果某个data属性在新页面中不再被使用，那么需要从该属性的dep.subs中移除渲染watcher，以避免不必要的页面重新渲染。
依赖收集过程：
- getter方法：在watcher构造函数中，通过调用get方法触发依赖的收集。如果传入的是函数，则该函数会被赋值给getter，从而在后续调用get时直接触发依赖收集。
- Dep.target：在调用get方法读取属性时，如果设置了Dep.target的标识位，就会触发依赖收集。这通过pushTarget和popTarget两个方法管理依赖收集的嵌套问题，确保正确收集依赖。
嵌套watcher处理：
- 栈管理：通过pushTarget将当前watcher压入栈中，并将watcher设置为Dep.target。当依赖收集结束时，通过popTarget从栈顶弹出watcher，并将其设置回Dep.target。这一机制解决了依赖收集过程中嵌套watcher时的复杂性。

综上所述，Vue源码中的watcher实现通过新增的deps和newDeps参数、依赖收集逻辑以及嵌套watcher的处理机制，共同构成了Vue响应式系统的重要组成部分。

热门标签