Vue基础-effect

Vue3 的 effect、 watch、watchEffect 的实现原理

effect 函数

Vue3 里面 effect 函数 API 是用于注册副作用函数的函数，也是 Vue3 响应式系统最重要的 API 之一。通过 effect 注册了一个副作用函数之后，当这个副作用函数当中的响应式数据发生了读取操作之后，通过 Proxy 的 get,set 拦截，从而在副作用函数与响应式数据之间建立了联系。具体就是当响应式数据的 ”读取” 操作发生时，将当前执行的副作用函数存储起来；当响应式数据的 “设置” 操作发生时，再将储起来的副作用函数取出来执行。

什么是副作用函数？

副作用函数指的是会产生副作用的函数，如下面的代码所示：

javascript

 体验AI代码助手
 代码解读
复制代码function effect() {
    document.body.innerText = 'hello coboy ~'
}

当 effect 函数执行时，它会设置 body 的文本内容，但除了 effect 函数之外的任何函数都可以读取或者设置 body 的文本内容。也就是说，effect 函数的执行会直接或间接影响其他函数的执行，这时我们说effect 函数产生了副作用。副作用很容易产生，例如一个函数修改了全局变量，这其实也是一个副作用，如下面的代码所示：

javascript

 体验AI代码助手
 代码解读
复制代码// 全局变量
let val = 1
function effect() {
    val = 2 // 修改全局变量，产生副作用
}

例子说明来自 《vue.js 设计与实现》

我们在最文章最开头说到 Vue3 最新的 watch 实现是通过最底层的响应式类 ReactiveEffect 的实例化一个 reactive effect 对象来实现的，那么我们先来了解一下 ReactiveEffect 类。

ReactiveEffect 类

相信很多关注 Vue3 源码的同学都知道，Vue3 先前的响应式系统版本中是没有 ReactiveEffect 这个类的，最新版本用面向对象的编程方式把变量当成对象进行操作，让编程思路更加清晰简洁，而且减少了很多冗余变量的出现，使用 ReactiveEffect 这个类封装了 effect 相关的数据和方法，方便了函数、变量、数据的管理。

作者：Cobyte 链接：https://juejin.cn/post/7098303741278814221 来源：稀土掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。