Vue 3 响应式数据本质

所有美好的东西，其实都是免费的。

一、vue3响应式数据的本质

在vue 2.x中通过defineProperty来实现响应式数据
在vue3 中是通过Proxy来实现响应式数据的
本篇文章主要介绍vue3响应式数据的实现原理。对于Proxy相信大家都很熟悉，就是一个对对象进行拦截，监听对象的监听器。可以看一下下面的一个简单示例。

let obj = { name: 'aiguo', age: 18 }
const state = new Proxy(obj, {
    get(obj, key) {
        console.log(obj, key) // { name: 'aiguo', age: 18 } name
        return obj[key]
    },
    set(obj, key, value) {
        console.log(obj, key, value)
    }
})
console.log(state.name) // aiguo

当执行 console.log(state.name) 这段代码的时候，会触发监听器 state中的get方法，执行结果如上图。

let obj = { name: 'aiguo', age: 18 }
const state = new Proxy(obj, {
    get(obj, key) {
        console.log(obj, key) 
        return obj[key]
    },
    set(obj, key, value) {
        console.log(obj, key, value) // { name: 'aiguo', age: 18 } name antiai
    }
})
state.name = 'antiai'

当执行 state.name = 'antiai' 这段代码的时候，会触发监听器中set方法，执行结果如上。

vue3中通过触发proxy中的set方法更新视图的操作，来实现响应式数据的渲染，下面是一段伪代码。

let obj = { name: 'aiguo', age: 18 }
const state = new Proxy(obj, {
    get(obj, key) {
        console.log(obj, key)
        return obj[key]
    },
    set(obj, key, value) {
        console.log(obj, key, value) // { name: 'aiguo', age: 18 } name antiai
        console.log('更新视图')
    }
})
state.name = 'antiai'

二、proxy的注意点

set方法必须通过返回值告诉Proxy此次操作是否成功。 proxy既可以对对象做监听，同样也可以对数组做监听，可以通过对数组做监听的方式来理解上面这段话。

let arr = [0, 1, 2]
const state = new Proxy(arr, {
    get(obj, key) {
        console.log(obj, key)
        return obj[key]
    },
    set(obj, key, value) {
        console.log(obj, key, value)
        obj[key] = value
        console.log('更新视图')
    }
})
console.log(state[1])
state[1] = 20

当我们触发proxy的get、set方法的时候，一切都可以正常运行。但是，当我们调用生成的proxy实例的push方法时候，会运行出错，代码如下。

let arr = [0, 1, 2]
const state = new Proxy(arr, {
    get(obj, key) {
        console.log(obj, key)
        return obj[key]
    },
    set(obj, key, value) {
        console.log(obj, key, value)
        obj[key] = value
        console.log('更新视图')
    }
})
state.push(4)

错误截图如下：

image.png

可以看到，报错 TypeError: 'set' on proxy: trap returned falsish for property '3'.引起这段报错的原因是：state.push(4) 会执行两个操作，push && length，既首先给数组添加数据，然后再修改数据的length属性，当push操作之后并没有声明是否成功，会阻赛了后续的操作，所以引起了报错。解决这个问题的方法也比较简单，那就是在proxy 的set方法中增加 return 语句，来声明上次动作已完成✅。代码如下：

let arr = [0, 1, 2]
const state = new Proxy(arr, {
    get(obj, key) {
        console.log(obj, key)
        return obj[key]
    },
    set(obj, key, value) {
        console.log(obj, key, value)
        obj[key] = value
        console.log('更新视图')
        return true
    }
})
state.push(4)
console.log(state)

运行结果如下：

image.png

本篇主要回顾了一下Proxy的用法，也是一个简单的热身，下篇文章中，我们会注意介绍 vue3中通过proxy实现的几个ref函数，reactive，ref，shallowRef，shallowReactive.

Vue 3 响应式数据本质