手写 Vue 源码 === 依赖清理机制详解

目录

引言

响应式系统基础回顾

依赖清理的必要性

ReactiveEffect 类的设计

依赖清理的三个关键函数

1. preCleanEffect：执行前的准备

2. trackEffects：依赖收集与 diff 算法

3. postCleanEffect：执行后的清理

4. cleanDepEffect：清理依赖

实际案例分析

依赖清理算法的优化

总结

引言

Vue 的响应式系统是其核心特性之一，而依赖清理机制则是确保响应式系统高效运行的关键部分。本文将深入探讨 Vue 响应式系统中的依赖清理机制，特别是 preCleanEffect、 postCleanEffect 以及 trackEffects 中的 diff 算法，并通过实际案例分析其工作原理。

响应式系统基础回顾

在深入依赖清理之前，让我们先简单回顾一下 Vue 响应式系统的基本工作原理：

1. 当我们使用  effect  函数包裹一个回调函数时，这个回调函数会立即执行
2. 执行过程中，会访问响应式对象的属性，触发 getter
3. 在 getter 中，会通过 track 函数收集当前正在执行的 effect 作为依赖
4. 当响应式对象的属性发生变化时，会通过 trigger 函数触发收集的依赖，重新执行 effect

export function effect(fn, options: any = {}) {
  // 创建一个 effect 只要依赖的属性变化，就会重新执行
  const _effect = new ReactiveEffect(fn, () => {
    _effect.run();
  });
  // 执行
  _effect.run();
}

依赖清理的必要性

为什么需要依赖清理？考虑以下场景：

effect(() => {
  if (condition) {
    console.log(obj.a)
  } else {
    console.log(obj.b)
  }
})

当 condition 为 true 时，effect 依赖 obj.a；当 condition 为 false 时，effect 依赖 obj.b。

如果没有依赖清理机制，当 condition 从 true 变为 false 后，effect 仍然会保持对 obj.a 的依赖。这意味着当 obj.a 变化时，effect 会重新执行，但实际上 obj.a 已经不再被使用了。

ReactiveEffect 类的设计

首先，让我们看一下 ReactiveEffect 类的设计，它是依赖清理机制的核心：

class ReactiveEffect {
  _trackId = 0; // 当前的 effect 执行了几次
  deps = []; // 当前的 effect 依赖了哪些属性
  _depsLength = 0; // 当前的 effect 依赖的属性有多少个

  public active = true; //默认是响应式的
  constructor(public fn, public scheduler) {}
  run() {
    // 如果当前状态是停止的，执行后，啥都不做
    if (!this.active) {
      return this.fn();
    }

    let lastEffect = activeEffect;
    try {
      activeEffect = this; // 当前的 effect 「依赖收集」

      // 每次执行前需要将上一次的依赖清空 effect.deps
      preCleanEffect(this);