当前位置：首页 > news >正文

《Vuejs 设计与实现》第 4 章（响应式系统）( 上 )

news 来源：原创 2025/8/13 14:53:20

4.1 响应式数据和副作用函数

4.2 基本响应式数据实现

4.3 设计完善响应系统

4.4 分支切换与清理

4.5 嵌套的 effect 与 effect 栈

4.1 响应式数据和副作用函数

副作用函数是指那些产生副作用的函数

function effect() {document.body.innerText = 'hello vue3'
}

执行 effect 函数时，它会设置 body 的文本内容，这种更改可以被其他任何函数读取或设置。
因此，effect 的执行会直接或间接影响其他函数的执行，这就是它产生副作用的地方。
副作用很容易产生，比如修改一个全局变量：

// 全局变量
let val = 1function effect() {val = 2 // 更改全局变量，产生副作用
}

理解了副作用函数后，我们再来看看响应式数据是什么。设想在一个副作用函数中读取了某个对象的属性：

const obj = { text: 'hello world' }function effect() {// 在执行effect函数时会读取 obj.textdocument.body.innerText = obj.text
}

上述代码，effect 函数会设置 body 元素的 innerText 属性，其值为 obj.text。当 obj.text 值发生变化时，我们希望 effect 函数会重新执行：

obj.text = 'hello vue3' // 修改 obj.text 的值，并希望副作用函数重新执行

当 obj.text 值改变时，我们希望副作用函数能自动重新执行。如果这可以实现，那么对象 obj 就可以被称为响应式数据。
但显然，现在我们无法实现这一点，因为 obj 仅仅是一个普通对象，当我们改变它的值时，除了值本身之外，不会有任何其他反应。
下一节我们将讨论如何让数据变为响应式数据。

4.2 基本响应式数据实现

为了使 obj 成为响应式数据，我们可以从以下两点出发：

执行副作用函数 effect 时，会触发 obj.text 的读取操作。
当修改 obj.text 的值时，会触发 obj.text 的设置操作。

如果我们能拦截对象的读取和设置操作，这个问题就简单了。

读取 obj.text 时，将副作用函数 effect 存储到一个“桶”中。
在设置 obj.text 时，从“桶”中取出副作用函数 effect 并执行。

在 ES2015 之前，我们可以使用 Object.defineProperty 函数，这是 Vue.js 2 的实现方式。
在 ES2015+ 中，我们可以使用代理对象 Proxy，这是 Vue3 的实现方式。

基于以上思路，我们可以用 Proxy 来实现响应式数据：

// 存储副作用函数的桶
const bucket = new Set()// 原始数据
const data = { text: 'hello world' }
// 代理原始数据
const obj = new Proxy(data, {// 拦截读取操作get(target, key) {// 添加副作用函数 effect 到桶中bucket.add(effect)// 返回属性值return target[key]},// 拦截设置操作set(target, key, newVal) {// 设置属性值target[key] = newVal// 取出并执行桶中的副作用函数bucket.forEach(fn => fn())// 返回 true 表示设置成功return true}
})

首先，我们创建一个用于存储副作用函数的 Set 类型的桶 bucket。
然后，定义原始数据 data，并创建其代理对象 obj，我们为代理对象设置了 get 和 set 拦截器，以拦截读取和设置操作。
读取属性时，我们把副作用函数 effect 添加到桶中。
设置属性时，我们先更新原始数据，然后重新执行桶中的副作用函数。这样就实现了响应式数据。
测试一下：

// 副作用函数
function effect() {document.body.innerText = obj.text
}// 触发读取
effect()// 1秒后修改响应式数据
setTimeout(() => {obj.text = 'hello vue3'
}, 1000)

在浏览器中运行以上代码，我们将得到预期的结果。
但当前的实现仍有不足，比如我们是直接通过函数名 effect 获取副作用函数，这种硬编码方式缺乏灵活性。
副作用函数的名字是可以任意命名的，我们可以把副作用函数命名为 myEffect，或者甚至用一个匿名函数。
因此，我们需要找到去除这种硬编码的方法。
下一节将详细讨论这个问题，这里只需理解响应式数据的初步实现和工作原理即可。

4.3 设计完善响应系统

接下来我们将构建一个更完善的响应系统，实现步骤如下：

读取操作时，将副作用函数收集到“桶”中。
设置操作时，从“桶”中取出并执行副作用函数。

为了解决硬编码副作用函数名（effect）的问题，我们提供一个注册副作用函数的机制：

// 用一个全局变量存储被注册的副作用函数
let activeEffect// effect 函数用于注册副作用函数
function effect(fn) {// 当调用 effect 注册副作用函数时，将副作用函数 fn 赋值给 activeEffectactiveEffect = fn// 执行副作用函数fn()
}

首先，我们定义了一个全局变量 activeEffect，用于存储被注册的副作用函数。

4.1 响应式数据和副作用函数

4.2 基本响应式数据实现

4.3 设计完善响应系统

相关文章：