Vue3.0中,Even You表示会使用
Proxy
代替Object.defineProperty
来做数据的响应式。对于Object.defineProperty
我们已经很熟悉了,之前也写过相关的Vue双向绑定原理(二)访问器属性defineProperty()和发布/订阅模式。
我们也知道了使用Object.defineProperty
的一些劣势:
Object.defineProperty
监听的是对象的属性,如果对象比较复杂,需要逐个深层遍历他的属性来实现监听,耗费性能Object.defineProperty
无法监听数组的变化,使Vue不得不对数组做了额外的hack。
相比之下Proxy
就更强大,接下来我们就来了解他。
参考资料:
Proxy简介
Proxy 对象用于定义基本操作的自定义行为(如属性查找,赋值,枚举,函数调用等)。使用方法如下:
// 语法
let p = new Proxy(target, handler);
// 用例
let p = {
a: 1};
let proxyP = new Proxy(p, {
get() {
// 获取proxyP对象属性时的自定义逻辑
},
set() {
// 设置proxyP对象属性时的自定义逻辑
}
})
上边的代码中:
- target:用Proxy包装的目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。
- handler:一个对象,其属性是当执行一个操作时定义代理的行为的函数。
- p/proxyP:是一个被代理后的新对象,它拥有target的一切属性和方法.只不过其行为和结果是在handler中自定义的.
这里重点说一下
handler
:handler
本身就是ES6所新设计的一个对象.它的作用就是用来自定义代理对象的各种可代理操作。它本身一共有13中方法,每种方法都可以代理一种操作,常用的几种方法如下:
// 在定义代理对象某个属性时的属性描述时触发该操作,比如在执行 Object.defineProperty(proxy, "foo", {}) 时。