所有美好的东西，其实都是免费的。
一、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.
