Vue3系列之effect和ReactiveEffect track trigger源码解析

什么是effect

effect 是 Vue3 中新增的一个 API，它的作用是创建一个「响应式副作用」函数。可以把它看作一个自包含的响应式系统，它能够跟踪封装起来的响应式数据，并在数据变化时进行相关操作。

ReactiveEffect 与 track

ReactiveEffect 类是 effect 创建出的对象的构造函数。

它的作用就是在响应式数据被读取时，将当前响应式函数与当前响应式数据记录下来，以便在数据变化时，触发响应式函数重新运行。

track 函数的作用就是将依赖当前读取的响应式数据的响应式函数和响应式数据关联起来。

trigger 函数

trigger 函数的作用是触发「响应式副作用」进行更新。

当响应式数据发生变化时，trigger 函数会重新运行该响应式数据所关联的所有响应式函数，并对比原来记录的依赖信息，来决定是否需要重新运行对应的响应式函数。

示例如下

示例 1

import { reactive, effect } from 'vue'

const state = reactive({
    counter: 0
})

const myEffect = effect(() => {
  console.log(`counter: ${state.counter}`)
})

setInterval(() => state.counter++, 1000)

这个例子中，我们创建了一个响应式数据 state，并用 effect 函数创建一个响应式函数 myEffect，用来记录 state.counter 的读取过程。

另外每秒钟会将 state.counter 的值加一，从而触发 myEffect 函数的执行，输出 counter: x。

示例 2

import { reactive, effect } from 'vue'

const state = reactive({
  counter: 0
})

const myEffect = effect(() => {
  console.log(`counter: ${state.counter}`)
})

effect(() => {
  if (state.counter > 5) {
    console.log('counter > 5, stop myEffect')
    myEffect.stop()
  }
})

setInterval(() => state.counter++, 1000)

这个例子中，和第一个例子相同，我们创建了一个响应式数据 state 和一个响应式函数 myEffect。

然而不同的是我们新增加了另一个响应式函数用于判断 state.counter 是否大于 5。若超过 5，就停止运行 myEffect 函数。

从中我们可以看到 effect 函数的依赖关系。