解码 Vue 源码：探索 Effect，剖析响应式系统背后的奥秘

2023-11-09 13:42:23

解码 Vue 源码：探索 Effect，剖析响应式系统背后的奥秘

前言

在前端开发领域，Vue.js 以其简洁优雅的语法和强大的响应式系统而备受推崇。在 Vue 的响应式系统中，Effect 扮演着至关重要的角色，它负责追踪数据的变化并触发相应的更新。本文将带您走进 Vue 源码，深入探索 Effect 机制，揭开响应式系统背后的奥秘。

Effect 的定义

Effect 是 Vue 响应式系统中的核心概念。它是一个函数，当其中依赖的数据发生变化时，该函数就会被触发并执行。Effect 的定义位于 effect.ts 文件中：

export function effect(fn, options: EffectOptions = EMPTY_OBJ): ReactiveEffect {
  if (activeEffect) {
    return effect.run(fn, options)
  }

  // ...
}

Effect 函数接受两个参数：要执行的函数 fn 和一个可选的配置对象 options。当 Effect 被调用时，它会创建一个 ReactiveEffect 实例，该实例包含了有关 Effect 的各种信息，例如依赖的数据、执行状态等。

track 和 trigger

在 Effect 的内部，有两个重要的函数：track 和 trigger。这两个函数是响应式系统追踪数据变化和触发更新的关键。

track

track 函数负责追踪数据的变化。当 Effect 被创建时，它会调用 track 函数来收集所有依赖的数据。这些数据可能是响应式对象中的属性，也可能是其他 Effect 的返回值。当这些数据发生变化时，track 函数会将这些变化记录下来。

trigger

当一个数据发生变化时，trigger 函数就会被调用。trigger 函数会遍历所有依赖于该数据的 Effect，并触发这些 Effect 的执行。这样，当一个数据发生变化时，所有依赖于该数据的 Effect 都会被重新执行，从而实现响应式更新。

ReactiveEffect

ReactiveEffect 是 Effect 的实例。它包含了有关 Effect 的各种信息，例如依赖的数据、执行状态等。ReactiveEffect 的定义位于 effect.ts 文件中：

export class ReactiveEffect {
  active = true
  deps: Set<ReactiveEffect>[] = []
  parent: ReactiveEffect | undefined

  // ...
}

ReactiveEffect 实例包含了以下几个重要的属性：

active：表示 Effect 的激活状态。当 Effect 被创建时，active 属性为 true。当 Effect 被销毁时，active 属性为 false。
deps：是一个数组，其中每个元素都是一个依赖的数据的集合。当一个 Effect 被创建时，它会遍历所有依赖的数据并将其添加到 deps 数组中。
parent：指向父 Effect 的引用。当一个 Effect 被创建时，它会将其父 Effect 作为 parent 属性的值。