Vue3 源码解读之副作用函数与依赖收集

作为Vue3的主要开发者之一，核心团队成员黄轶（尤雨溪）在个人博客上分享了Vue3源码解读系列文章，其中就包括了“副作用函数与依赖收集”这一主题。

以下是该主题的完整攻略：

1. 副作用函数

副作用函数（Effect Function）是Vue3源码中的一个重要概念。在React Hook中有个类似的概念，叫做副作用钩子（Effect Hook），可以用来处理组件渲染之外的操作，例如发送网络请求等。

在Vue3中，副作用函数的作用主要是将一个响应式对象转化为Effect对象，从而完成依赖收集。如果该响应式对象发生变化，将会重新计算。

创建一个副作用函数需要使用Vue3提供的effect函数：

import { effect } from 'vue'

const count = reactive({num: 0})

effect(() => {
  console.log(count.num)
})

count.num = 1 // 输出1
count.num = 2 // 输出2

在这个例子中，我们创建了一个响应式对象count，并使用effect函数将其转化为Effect对象。接着在effect函数的回调函数中，我们输出了count的num属性。

当我们修改count的num属性时，Effect对象将会自动触发重新计算，输出对应的值。

2. 依赖收集

Vue3的响应式系统和Vue2的双向绑定思想有所不同，主要分为三个部分：Getter、Setter与Dep（依赖项）。

其中最重要的部分就是Dep，它用于记录所有的Effect对象，以便在响应式数据发生变化时自动触发重新计算。

如何实现依赖收集呢？Vue3使用了两种方法：WeakMap与Set。

在响应式对象中，每个属性都使用了一个WeakMap对象记录了该属性相关的依赖项。在取值时，会自动将当前的Effect对象添加到该属性的依赖项中。

当值发生变化时，就会根据该属性所对应的WeakMap对象，依次触发所有的Effect对象进行重新计算。

另外一种方法则是使用Set对象，它用于记录当前正在运行的activeEffect对象。在effect函数中如果使用了响应式对象，则会将当前的activeEffect对象添加到该Set对象中，以便在依赖项发生变化时可以快速的通知到对应的Effect对象。

3. 示例说明

通过上面的说明，我们了解了Vue3中的副作用函数和依赖收集机制。下面我们来看两个具体的示例说明。

示例1：计算属性

在Vue2中，计算属性常用来实现一些复杂的数据计算逻辑，例如过滤器，格式化等。在Vue3中，这些特性都被Vue3自身的API所替代，不再需要专门的计算属性。

在Vue3中，我们可以很轻松的使用effect函数实现类似计算属性的功能：

import { effect, reactive } from 'vue'

const data = reactive({ num1: 0, num2: 0 })

const result = effect(() => {
  console.log("Auto update!")
  return data.num1 + data.num2
})

data.num1 = 1 // 输出Auto update!
data.num2 = 2 // 输出Auto update!
console.log(result.value) // 输出3

在这个示例中，我们创建了一个响应式对象data，并使用effect函数创建了一个自动更新的result对象。result对象的值为data.num1和data.num2的和。

当我们重定义data的属性时，result对象会自动触发更新，并输出对应的信息。

示例2：关于懒执行

除了示例1中的普通副作用函数应用，effect函数还提供了懒执行的功能。懒执行可以将响应式对象的更新推迟到将来的某个时间点。

例如，在使用Vue3编写大型应用时，如果每个Effect对象都自动执行，可能会导致应用的性能大大下降。使用懒执行机制，可以减轻这一问题。

以下是基于懒执行的示例：

import { effect, reactive } from 'vue'

const data = reactive({num: 0})

const result = effect(() => {
  console.log("Auto update!")
  return data.num
}, {
  lazy: true
})

console.log(result.value) // 输出0
data.num = 1 // 不会输出Auto update!
console.log(result.value) // 输出1

在这个示例中，我们创建了一个响应式对象data，并使用懒执行方式创建了一个result对象。

当我们首次调用result对象的value属性时，不会输出“Auto update!”信息。只有当我们改变data的属性值后，才会触发result对象的回调函数，并输出“Auto update!”信息。

该示例说明了懒执行机制的用途和基本操作，可以在某些情况下提升性能。