Vue3 源码解析系列：依赖收集到派发更新**

前端

2023-10-26 06:35:38

引言

在上篇中，我们介绍了 effect 的用法和作用，并了解到了依赖收集到派发更新的具体流程。本篇将深入解析 Vue3 中的依赖收集和派发更新机制，带你领略 Vue3 响应式系统的底层奥秘。

依赖收集

当一个 effect 被创建时，它会收集其依赖项。依赖项可以是响应式数据，也可以是计算属性。当依赖项发生变化时，effect 会被重新执行。

依赖项的收集过程主要通过以下步骤实现：

创建跟踪器： effect 被创建时，会创建一个跟踪器，用于收集 effect 的依赖项。
激活跟踪器： 当 effect 被执行时，会激活跟踪器，开始收集依赖项。
遍历依赖项： effect 会遍历其所有依赖项，并在依赖项的 dep（依赖项收集器）中注册自身。
停止跟踪器： 当 effect 执行完毕时，会停止跟踪器，停止收集依赖项。

派发更新

当一个响应式数据发生变化时，需要触发派发更新的过程，通知所有依赖该数据的 effect 进行重新执行。

派发更新的过程主要通过以下步骤实现：

收集无效的 effect： 响应式数据发生变化后，会收集所有依赖该数据的 effect。
调度更新： 将收集到的无效 effect 交给 scheduler（调度器）进行调度。
执行更新： scheduler 会根据一定策略（如微任务）执行这些无效的 effect，触发其重新执行。

深度解析

响应式数据

Vue3 中的响应式数据是通过 Proxy 对象实现的。Proxy 对象可以拦截对对象的访问和修改，从而实现数据的响应式。

当响应式数据发生变化时，会触发 Proxy 对象的 setter，setter 会通知 dep（依赖项收集器），从而触发派发更新的过程。

effect

effect 是 Vue3 中用来管理依赖项和派发更新的核心概念。effect 本质上是一个函数，它会在执行时收集其依赖项，并在依赖项发生变化时重新执行。

Vue3 中提供了两种类型的 effect：

立即执行的 effect： 此类 effect 会在创建时立即执行。
延迟执行的 effect： 此类 effect 会在派发更新时才执行。

scheduler

scheduler（调度器）负责管理 effect 的执行顺序。scheduler 可以采用不同的策略，如微任务或宏任务，来执行 effect。

实例

以下是一个 Vue3 中依赖收集和派发更新的简单示例：

const app = Vue.createApp({
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newValue, oldValue) {
      console.log('count changed from', oldValue, 'to', newValue)
    }
  }
})

app.mount('#app')
app.count++ // 输出：count changed from 0 to 1