深入浅出解析Vue3响应式系统：effect、reactive、依赖收集和触发依赖

2024-02-23 07:02:26

前言

在构建前端应用程序时，我们经常需要处理大量的数据状态，这些数据状态可能会随着用户交互或其他因素而发生变化。为了让应用程序能够响应这些变化，我们需要使用一种机制来跟踪数据的变化，并相应地更新应用程序的UI。Vue3的响应式系统就是一种这样的机制，它能够自动跟踪数据的变化，并触发相应的更新。

Vue3响应式系统概述

Vue3的响应式系统主要由effect、reactive、依赖收集和触发依赖四个部分组成。其中，effect是一个用来跟踪数据的变化的函数，reactive是一个用来创建响应式对象的函数，依赖收集是指effect函数在执行时会收集它所依赖的数据，触发依赖是指当effect函数所依赖的数据发生变化时，会触发effect函数的重新执行。

effect

effect是一个用来跟踪数据的变化的函数，它接收一个函数作为参数，该函数会被立即执行。当effect函数所依赖的数据发生变化时，该函数会被重新执行。

// 创建一个effect函数
const effect = (fn) => {
  // 将effect函数包装成一个闭包函数
  const wrappedFn = () => {
    // 在闭包函数中执行effect函数
    fn()
  }

  // 将effect函数添加到effect队列中
  effectQueue.push(wrappedFn)

  // 调度effect队列
  queueMicrotask(flushEffects)
}

reactive

reactive是一个用来创建响应式对象的函数，它接收一个对象作为参数，并返回一个响应式对象。响应式对象的特点是，当其内部数据发生变化时，会触发effect函数的重新执行。

// 创建一个reactive对象
const reactiveObject = reactive({
  count: 0
})

// 监听reactive对象的count属性
effect(() => {
  console.log(reactiveObject.count)
})

// 当reactive对象的count属性发生变化时，effect函数会被重新执行
reactiveObject.count++ // 输出: 1

依赖收集

当effect函数执行时，它会收集它所依赖的数据。依赖收集是指将effect函数与它所依赖的数据建立联系的过程。当effect函数所依赖的数据发生变化时，可以根据依赖关系找到所有受影响的effect函数，并触发它们的重新执行。

// 在effect函数中收集依赖
const effect = (fn) => {
  // 将effect函数包装成一个闭包函数
  const wrappedFn = () => {
    // 在闭包函数中执行effect函数
    fn()

    // 收集effect函数的依赖
    track(effect)
  }

  // 将effect函数添加到effect队列中
  effectQueue.push(wrappedFn)

  // 调度effect队列
  queueMicrotask(flushEffects)
}

// 依赖收集函数
const track = (effect) => {
  // 从effect函数中获取其依赖的数据
  const deps = effect.deps

  // 将effect函数添加到每个依赖的数据的依赖列表中
  deps.forEach((dep) => {
    dep.add(effect)
  })
}

触发依赖

当effect函数所依赖的数据发生变化时，会触发effect函数的重新执行。触发依赖是指将数据变化的消息通知给effect函数的过程。当数据发生变化时，可以根据依赖关系找到所有受影响的effect函数，并触发它们的重新执行。

// 触发依赖函数
const trigger = (dep) => {
  // 获取所有依赖于该数据的effect函数
  const effects = dep.effects

  // 触发所有依赖于该数据的effect函数的重新执行
  effects.forEach((effect) => {
    effect()
  })
}