解读vue3源码-响应式篇3 effect副作用函数

提示：看到我请让我滚去学习

文章目录

前言
effect问题拓展
- [分支切换与 cleanup](#分支切换与 cleanup)
- [嵌套的 effect 与 effect 栈](#嵌套的 effect 与 effect 栈)
- 解决在副作用函数中同时读取和操作同一属性时无限循环
effect函数实现
- [computed-api 实现图解](#computed-api 实现图解)
- 在这里插入图片描述
总结

前言

什么是副作用函数？

在 Vue 3 中，副作用函数（Effect Function）通常指的是那些依赖于响应式数据并在数据变化时重新执行的函数。Vue 3 引入了 ref 和 reactive API 来创建响应式数据，以及 effect 函数来观察和处理这些数据的变化。

当一个函数被标记为副作用函数时，它会被 Vue 的响应式系统跟踪。这意味着每当这个函数依赖的响应式数据发生变化时，Vue 会自动重新执行这个函数，从而触发 UI 的更新或其他相关操作。

ts 复制代码

例如：
import { ref, effect } from 'vue';
const count = ref(0);
// 定义一个副作用函数
effect(() => {
  console.log('Count changed:', count.value);
});
// 更改count的值，副作用函数将被重新执行
count.value++;

effect问题拓展

以我们的精简版本的watchEffect 函数做模本例子，我们将对其进行拓展

ts 复制代码

  function watchEffect (effect) {
    activeEffect = effect
    effect()
  }

全局targetMap存储结构：

分支切换与 cleanup

我们就简单的watchEffect ，会有很多问题，比如下面的示例：

ts 复制代码

  const data = { ok: true, a: 111, b: 222 }
  const obj = reactive(data)
  watchEffect(function effectFn () {
    console.log(obj.ok ? obj.a : obj.b)
  })
  //111
  obj.ok = false  //222
  obj.a = 3 //222

我们使用一个三元表达式，第一次初始化watchEffect函数，因为obj.ok 为true，所以访问的是obj.ok和obj.a，那么全局targetMap如下：

当我们修改obj.ok的值后，重新触发watchEffect函数，再次访问内部依赖，因为obj.ok值改变，所以访问的属性变成了obj.ok和obj.b，这样obj.b就会收集到targetMap中，全局targetMap如下：

这样就有了问题，我们最新的effect其实是ok和b的依赖，但是依赖表中存储了ok、a、b三个属性，所以当我们访问a时，还是会触发watchEffect重新执行。

解决这个问题的思路很简单，每次副作用函数执行时，我们可以先把它从所有与之关联的依赖集合中删除，要将一个副作用函数从所有与之关联的依赖集合中移除，就需要明确知道哪些依赖集合中包含它。所以我们在响应式数据访问收集副作用函数时，需要给副作用函数添加一个dep[]属性，然后将当前触发依赖收集的属性push到此dep中。

那我们来看vue3源码实现：

其实过程就是：实现双向记忆（运行effect时，找到所有绑定这个effect的属性，删除所有属性上的此effect）

1.首先ReactiveEffect类中定义了属性_depsLength，这个属性是为了记录当前收集的dep是同一个effect中的第几个响应式属性

在run方法中每次执行副作用函数前都会调用preCleanupEffect方法，这个方法就是重置当前effect内部的指针，_trackId用于记录当前effect实例是第几次运行，_depsLength表示当前是第几个dep收集，每次重走effect方法，都会重置_depsLength为0，表示从第1个开始收集

而在track函数执行收集依赖时，我们看下effect是怎么记录dep的

这里有一个简单的diff算法，我们知道_depsLength用来记录当前dep是effect方法中第几个记录的，比如我在上述示例：

ts 复制代码

 watchEffect(function effectFn () {
    console.log(obj.ok ? obj.a : obj.b)
  })

当obj.ok为true时，第一次进入watchEffect，effectFn副作用函数中监听的值为ok和a，那么effectFn的deps[]中就是[ok,a],当我们修改ok的值，就会触发effectFn执行，effectFn中再次访问值为ok和b，这时候会按照顺序将新值和旧值按顺序对比，第一个dep不变是ok，然后用b替换a。

ts 复制代码

  const stop=effect(function effectFn111 () {
        console.log('11111', obj.a, obj.a)
      })

此处_trackId用于记录当前effect副作用函数运行次数，if (dep.get(effect2) !== effect2._trackId) {}。可以过滤到上面这种一个函数中多次使用一个变量的情况

此时还会有一个新问题，那么如果第一次副作用函数绑定了2个属性上，但是第二次运行时只需要绑定1个了，例如

ts 复制代码

 watchEffect(function effectFn () {
    console.log(obj.ok ? obj.a : null)
  })

那么在执行完替代后需要根据新列表数量，删除多余列表长度，实现代码如下：

vue3.0是使用set存储effect依赖，但是set是无序的，而这也是为什么改成有序的map存储effects的原因之一。

嵌套的 effect 与 effect 栈

我们vue3是可以支持组件嵌套的，所以本质effect也是应该要支持嵌套，例如：

ts 复制代码

effect(function effectFn1() {
	effect(function effectFn2() { /* ... */ })
    console.log(pro.a)
 })

但是这样就会有问题，像上面这样写，pro.a绑定的副作用函数是effectFn2并非effectFn1，这是因为我们用全局变量 activeEffect 来存储通过 effect 函数注册的副作用函数，这意味着同一时刻 activeEffect 所存储的副作用函数只能有一个。当副作用函数发生嵌套时，内层副作用函数的执行会覆盖 activeEffect 的值，并且永远不会恢复到原来的值。这时如果再有响应式数据进行依赖收集，即使这个响应式数据是在外层副作用函数中读取的，它们收集到的副作用函数也都会是内层副作用函数，这就是问题所在。

而我们的代码中只需要在effect运行之初记录上次的effect，在副作用函数执行完毕时，恢复上次的effect就行。

解决在副作用函数中同时读取和操作同一属性时无限循环

ts 复制代码

  const data = { ok: true, a: 111, b: 222 }
  const obj = reactive(data)
  watchEffect(function effectFn111 () {
    console.log('11111', obj.a++)
  })
  obj.a = 666

这种在副作用函数中既读取又操作一个属性会爆栈，这是因为首先读取 obj.a的值，这会触发 track 操作，将当前副作用函数收集到"桶"中，接着将其加 1 后再赋值给 obj.a，此时会触发 trigger 操作，即把"桶"中的副作用函数取出并执行。但问题是该副作用函数正在执行中，还没有执行完毕，就要开始下一次的执行。这样会导致无限递归地调用自己，于是就产生了栈溢出。

解决方案，在trigger触发时判断要执行的副作用函数是否正在执行，正在执行就跳过。

vue3代码通过_running变量控制