Vue3响应式02-响应式数据的基本实现

副作用函数

副作用函数（Side Effect Function）是指在执行过程中除了返回值之外，还会对外部状态产生影响的函数。如下面的代码所示：

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

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

响应式

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

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

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

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

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

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

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

如果我们能拦截一个对象的读取和设置操作，事情就变得简单了.

当读取(get)字段 obj.text 时，我们可以把副作用函数 effect 存储到一个“桶”里，

接着，当设置(set) obj.text 时，再把副作用函数 effect 从“桶”里 取出并执行即可.

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

// 存储副作用函数的桶
const bucket:Set<Function> = new Set()

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

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

// 副作用函数
function effect() {
    // document.body.innerText = obj.text
 console.log(obj.text)    // 这里使用console.log,方便直接运行ts文件
}

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

但是目前的实现还存在很多缺陷，例如我们直接通过名字（effect）来获取副作用函数，这种硬编码的方式很不灵活。副作用函数的名字可以任意取，我们完全可以把副作用函数命名为 myEffect，甚至是一个匿名函数，因此我们要想办法去掉这种硬编码的机制。这里大家只需要理解响应式数据的基本实现和工作原理即可。

最终代码

// 存储副作用函数的桶
const bucket:Set<Function> = new Set()

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


// 副作用函数
function effect() {
    console.log(obj.text)
}

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