vue中的响应式数据和副作用函数

在vue的响应式系统的实现中，我们可以了解到：
1，什么是响应式数据和副作用函数
2，如何避免无线递归
3，为什么需要嵌套的副作用函数
4，两个副作用函数之间会产生哪些影响
5，如何根据语言规范实现对数据对象的代理

vue3是采用Proxy实现响应式数据

副作用函数

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

function effect() {
    document.body.innerHTML = 'hello vue3'
}
1
2
3

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

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

vue中的响应式基本原理

以上是副作用函数。假设在一个副作用函数中读取了某个对象的属性：

const obj = { text: 'hello world' }
function effect() {
    // effect 函数的执行会读取 obj.text 
    document.body.innerText = obj.text
}
1
2
3
4
5

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

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

这句代码修改了字段 obj.text 的值，我们希望当值变化后，副作用函数自动重新执行，如果能实现这个目标，那么对象 obj 就是响应式数据。但很明显，以上面的代码来看，我们还做不到这一点，因为obj 是一个普通对象，当我们修改它的值时，除了值本身发生变化之外，不会有任何其他反应。

如何才能让 obj 变成响应式数据呢？通过观察我们能发现两点线索：

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

如果我们能拦截一个对象的读取和设置操作，事情就变得简单了。
当读取字段 obj.text 时，我们可以把副作用函数 effect 存储到一个“桶”里，如图所示：

接着，当设置 obj.text 时，再把副作用函数 effect 从“桶”里取出并执行即可，如图 所示：

现在问题的关键变成了我们如何才能拦截一个对象属性的读取和设置操作。
在 ES2015 之前，只能通过 Object.defineProperty 函数实现，这也是 Vue.js 2 所采用的方式。在 ES2015+ 中，我们可以使用代理对象 Proxy 来实现，这也是 Vue.js 3 所采用的方式。

接下来我们就根据如上思路，采用 Proxy 来实现：

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

这里，我们创建了一个用于存储副作用函数的桶 bucket，它是 Set 类型。
接着定义原始数据data，obj 是原始数据的代理对象，我们分别设置了 get 和 set 拦截函数，用于拦截读取和设置操作。
当读取属性时将副作用函数 effect 添加到桶里，即 bucket.add(effect)，然后返回属性值；
当设置属性值时先更新原始数据，再将副作用函数从桶里取出并重新执行，这样我们就实现了响应式数据。

以上就是响应式数据的基本实现和工作原理。