# 前言

上一小节我们说到了 Reactive 会在 proxy getter 的时候收集 effect 依赖，在 proxy setter 的时候触发 effect 的执行。那么 effect 副作用函数到底是个什么？以及是如何被收集起来的呢？

# effect

找到源码中关于 effect 部分的定义：

export function effect (fn, options) {
  // 如果 fn 已经是一个 effect 函数了，则指向原始函数
  if (fn.effect) {
    fn = fn.effect.fn
  }
  // 构造 _effect 实例
  const _effect = new ReactiveEffect(fn)

  // options 初始化
  if (options) {
    extend(_effect, options)
    if (options.scope) recordEffectScope(_effect, options.scope)
  }

  // 如有 options 或者 不是懒加载，执行 _effect.run()
  if (!options || !options.lazy) {
    _effect.run()
  }

  // 返回 _effect.run
  const runner = _effect.run.bind(_effect)
  runner.effect = _effect
  return runner
}

@前端进阶之旅: 代码已经复制到剪贴板

这个 effect 函数内部核心是通过 ReactiveEffect 类创建了一个 _effect 实例，从代码来看，_effect 上包含了一个 run 函数。默认 effect 是没有传入 options 参数的，所以这里直接执行了 _effect.run()。我们知道，fn 函数是在 effect 函数中的一个入参，比如：

const state = reactive({a: 1})

effect(() => console.log(state.a))

@前端进阶之旅: 代码已经复制到剪贴板

根据上一小节，我们知道因为这里我们访问了 state.a 所以收集了副作用函数，但是需要知道的是这里的 effect 传入的是一个 fn，所以要想访问 state.a 那这个 fn 必须要执行才可以。那是在哪里执行的呢？接下来看一下 ReactiveEffect 的实现：

// 用于记录位于响应上下文中的effect嵌套层次数
let effectTrackDepth = 0
// 二进制位，每一位用于标识当前effect嵌套层级的依赖收集的启用状态
export left trackOpBit = 1
// 表示最大标记的位数
const maxMarkerBits = 30

// 当前活跃的 effect
let activeEffect;

export class ReactiveEffect {
  // 用于标识副作用函数是否位于响应式上下文中被执行
  active = true
  // 副作用函数持有它所在的所有依赖集合的引用，用于从这些依赖集合删除自身
  deps = []
  // 指针为，用于嵌套 effect 执行后动态切换 activeEffect
  parent = undefined
  // ...
  run() {
    // 若当前 ReactiveEffect 对象脱离响应式上下文
    // 那么其对应的副作用函数被执行时不会再收集依赖
    if (!this.active) {
      return this.fn()
    }

    // 缓存是否需要收集依赖
    let lastShouldTrack = shouldTrack

    try {
      // 保存上一个 activeEffect 到当前的 parent 上
      this.parent = activeEffect
      // activeEffect 指向当前的 effect
      activeEffect = this
      // shouldTrack 置成 true
      shouldTrack = true
      // 左移操作符 << 将第一个操作数向左移动指定位数
      // 左边超出的位数将会被清除，右边将会补零。
      // trackOpBit 是基于 1 左移 effectTrackDepth 位
      trackOpBit = 1 << ++effectTrackDepth

      // 如果未超过最大嵌套层数，则执行 initDepMarkers
      if (effectTrackDepth <= maxMarkerBits) {
        initDepMarkers(this)
      } else {
        cleanupEffect(this)
      }
      // 这里执行了 fn
      return this.fn()
    } finally {
      if (effectTrackDepth <= maxMarkerBits) {
        // 用于对曾经跟踪过，但本次副作用函数执行时没有跟踪的依赖采取删除操作。
        // 新跟踪的 和 本轮跟踪过的都会被保留
        finalizeDepMarkers(this)
      }

      // << --effectTrackDepth 右移动 effectTrackDepth 位
      trackOpBit = 1 << --effectTrackDepth

      // 返回上个 activeEffect
      activeEffect = this.parent
      // 返回上个 shouldTrack
      shouldTrack = lastShouldTrack
      // 情况本次的 parent 指向
      this.parent = undefined
    }
  }
}

@前端进阶之旅: 代码已经复制到剪贴板

大致看一眼，我们可以看到在 ReactiveEffect 中是执行了 this.fn() 的，这也就解释了 effect 中的回调函数 fn 是在这里被调用的。接下来详细研究一下这个 ReactiveEffect。

但这段代码看起来不是很长，但涉及了好几个概念，我们来一个个看。

# 1. parent 的作用

为什么 ReactiveEffect 要设计一个 parent 这样一个看似没啥用的变量指针来存储上一次的 activeEffect 呢？如果改成下面这样不是更简单吗？

run() {
  if (!this.active) {
    return this.fn();
  }
  // 初始化
  shouldTrack = true;
  activeEffect = this;

  const result = this.fn();

  // 重置
  shouldTrack = false;

  return result;
}

@前端进阶之旅: 代码已经复制到剪贴板

其实对于下面这样的代码：

const state = reactive({a: 1})

effect(() => console.log(state.a))

state.a++

@前端进阶之旅: 代码已经复制到剪贴板

effect 函数内调用 ReactiveEffect 实例的 run 函数。run 函数执行的时候，把 activeEffect 指向 this。然后执行 effect 传入的 fn 函数，函数在执行的时候访问了 state.a 触发了 getter 钩子。回顾一下上一节的内容，getter 的时候有触发添加 activeEffect 的功能：

csharp
复制代码// 把 activeEffect 添加到 dep 中
dep.add(activeEffect!)

@前端进阶之旅: 代码已经复制到剪贴板

而 activeEffect 正是这里的 this。当执行 state.a++ 时，访问了state.a 的 setter。上一节也说了，setter 的执行会调用 effect.run 函数：

// triggerEffects
effect.run();

@前端进阶之旅: 代码已经复制到剪贴板

所以又会执行 fn。

到这里看似很完美，那么我们再来看另外一个例子🌰：

const state = reactive({
  a: 1,
  b: 2
});

// ef1
effect(() => {
  // ef2
  effect(() => console.log(`b: ${state.b}`))
  console.log(`a: ${state.a}`)
});

state.a ++

@前端进阶之旅: 代码已经复制到剪贴板

按照上面的逻辑，在第一次 effect 执行的时候，activeEffect = ef1 然后再执行内部的 effect，此时 activeEffect = ef2 然后 ef2 执行完成回到 ef1 函数体内，此时再访问 state.a 触发对 a 的依赖收集，但收集到的却是 ef2。那么最终打印的是：

b: 2
a: 1
b: 2

@前端进阶之旅: 代码已经复制到剪贴板

很明显不符合我们的要求，我们期望的是输出：

b: 2
a: 1
b: 2
a: 2

@前端进阶之旅: 代码已经复制到剪贴板

这时候 parent 就排上用场了，当为 effect 加上 parent 属性后，我们再来捋一下整体的流程。

执行 ef1 的时候，activeEffect 指向 ef1，此时 parent 是 undefined。
执行 ef1 fn 遇到了 ef2，调用 ef2 此时 ef2 的 parent 指向 ef1， activeEffect 指向 ef2。然后执行 ef2 的 fn。
ef2 的 fn 执行的时候，访问了 state.b 依赖收集 ef2。执行完成后，activeEffect = this.parent 又把 activeEffect 指向了 ef1。
返回 ef1 的 fn 体继续执行，此时访问 state.a 依赖收集 activeEffect 为 ef1。
触发 state.a 的 setter，调用 a 的副作用 ef1，依次打印……

到这里相信各位小伙伴已经清楚了 parent 的作用了，那就是通过 parent 这个标记，来回切换 activeEffect 的指向，从而完成对嵌套 effect 的正确的依赖收集。

# 2. 依赖清理

在说依赖清理之前，再来看一个有意思的例子：

const state = reactive({
  a: 1,
  show: true
});

effect(() => {
  if (state.show) {
    console.log(`a: ${state.a}`)
  }
});

state.a ++

setTimeout(() => {
  state.show = false
  state.a ++
}, 1000)

@前端进阶之旅: 代码已经复制到剪贴板

上面的例子中，我们在 effect 中完成了对 show 和 a 的依赖收集，然后 1s 后，我们改变了 show 的状态为 false。此时 effect 内的函数中的 console.log 将永远不会执行，然后再触发 state.a++ 的动作，访问 a 的 getter，如果没有依赖清理，那么按照之前的做法，测试也会触发 effect.fn 的执行，但这个执行其实没意义的，因为 a 已经没有被使用了，是一个永远不会被访问到的变量，造成了性能浪费。所以我们需要删除 a 的副作用函数，让它不要执行。

接下来一起来看看 Vue 是怎么做的吧！这里涉及到的内容有点多，我们先一个个解释，首先补习一下关于 js 的一些操作符的基础知识。

1. 左移（<<）

左移操作符 (<<) 将第一个操作数转换成 2 进制后向左移动指定位数，左边超出的位数将会被清除，右边将会补零。

2. 位或操作（|）

位或操作符（|），如果两位之一为 1，则设置每位为 1。

3. 按位与（&）

按位与运算符 (&) 在两个操作数对应的二进位都为 1 时，该位的结果值才为 1，否则为 0。

4. 按位非（~）

按位非运算符（~），反转操作数的位。

依赖清理过程.gif

响应式原理-副作用函数探秘|Vue3原理

响应式原理-副作用函数探秘|Vue3原理