【Vue2.x 源码学习】第二十一篇 - 依赖收集的过程分析

一，前言

上篇，使用真实节点替换原始节点，主要涉及以下几点：

• 新老节点的更新方案

• 虚拟节点与真实节点映射

• 实现新老节点的替换

本篇，依赖收集的过程分析

二，依赖收集

1，前情回顾

前面已经完了 Vue 的两大核心部分：响应式数据 和 数据渲染

截止至上篇，完成了整个 Vue 的初始化流程

从本篇开始，将进入 Vue 的更新流程

2，Vue 的使用

备注：当前仅考虑单个根组件的更新，暂不涉及多组件更新；

同一数据可能被多个视图（页面或组件）所共享，如 Vuex 中的数据：

• A 组件，使用了数据 name；

• B 组件，使用了数据 name；

• 即 name 依赖了 A，B 两个组件；

• 当数据发生变化时，两个组件都会触发对应视图更新操作；

当响应式数据发生变化时，会触发对应视图的更新

这就需要知道数据和视图间的关系，从而准确触发该数据对应视图的更新操作

这就涉及到 Vue 依赖收集的过程

3，dep 和 watcher

在 Vue 中，依赖收集的实现使用了观察者模式：

每个数据具有一个 dep 属性：用于记录使用该数据的组件或页面的视图渲染函数 watcher

当数据发生变化时，dep 属性中存放的多个 watcher 将会被通知，

watcher 就会调用自身对应的更新方法 update，完成页面的重新渲染；

• 为 name 添加属性 dep：用于收集组件 A 和 组件 B 的渲染逻辑 watcherA，watcherB

• 为 watcherA，watcherB 添加各自的更新方法 update

• 当数据发生变化时，通知 dep 中存放的 watcherA，，watcherB 触发各个的更新方法 update

由于同一个数据可能在多个页面或组件中被渲染，所以一个 dep 可以对应多个 watcher；

由于同一个视图可能包含多个数据，所以一个 watcher 可以对应多个 dep；

综上，dep 和 watcher 是多对多关系

通过前面文章可知，vm._update(vm._render()) 执行了数据渲染和更新操作

watcher 中的 update 方法，便是触发了 vm._update(vm._render()) 重新进行数据渲染和视图更新

所以，需要将 vm._update(vm._render())改造为可以通过 watcher 调用的方法

4， 其他

• 数据响应式过程中，为每个属性扩展 dep，用于收集 watcher，当数据渲染时，记录 watcher；

• 当同一数据在同一视图中被多次使用时，dep 中应只记录一次 watcher，需对 watcher 进行查重；

• 防止只要一修改数据就会渲染视图的情况：当数据在视图中没有被使用时，数据的变化不应触发 watcher 渲染，需要在视图渲染时进行依赖收集；

三，结尾

本篇，主要介绍了 Vue 依赖收集的过程分析；

下一篇，Vue 依赖收集的实现