Vue计算属性底层依赖追踪机制：如何提取与追踪依赖？

Vue的计算属性依赖追踪完全基于自身响应式系统自动完成，无需手动声明依赖，核心流程可分为以下几步：

1. 响应式数据预处理 #

所有data、props中的响应式数据，在初始化阶段都会被Vue转化为带有getter和setter的代理对象，这是自动追踪依赖的基础。

2. 计算属性的观察者初始化 #

定义计算属性时，Vue会为它创建一个惰性观察者（Watcher），这个观察者与计算属性的getter函数绑定，仅在计算属性被访问时才启动工作。

3. 自动收集依赖 #

• 当首次访问计算属性，或依赖项变化后需要重新计算时，Vue会开启依赖收集模式，随后执行计算属性的getter函数。
• 在getter执行过程中，每访问一个响应式数据的属性，就会触发该属性的getter方法，这个getter会把当前计算属性的观察者，添加到该响应式数据的依赖列表中。

4. 依赖变化时的自动更新 #

• 当某个响应式数据被修改时，它的setter方法会被触发，随后遍历自身的依赖列表，通知所有关联的观察者（包括计算属性的观察者）。
• 收到通知后，计算属性的观察者会将该计算属性标记为“脏”状态，等到下一次访问这个计算属性时，才会重新执行getter函数更新结果，同时重新收集依赖（适配getter逻辑变化导致的依赖变更）。

和React需要手动指定依赖列表不同，Vue通过响应式数据的getter/setter钩子，在计算属性的getter执行过程中自动“嗅探”所有依赖项，全程无需开发者手动干预。

内容的提问来源于stack exchange，提问作者Ivan Uno