vue2使用的是Object.defineProperty, 劫持getter/setter方法, 兼容性好,支持IE9
可参考:https://www.jianshu.com/p/350d7cbcc1d8
vue3使用的proxy,功能更加强大,但是兼容性不好
Proxy是代理对象,代理的意思就是自己不直接执行,而让另外一个对象代替自己去做,有点像生活中的中介。使用代理时,代理对象在执行处理的过程中可能还会额外做一些事情,甚至有可能只做其他事情而不执行原来的业务。
Proxy只可以作为构造器使用new关键字来创建代理对象,而不可以作为方法来执行,创建Proxy语法如下:
new Proxy(target, handler);
处理器handler时对象的类型,代理实际执行的逻辑都是通过设置handler的属性方法中完成的,handler可以有14个属性,分别对应14种操作,这14个属性跟Reflect的14个属性完全相同,不过在使用代理的时候我们并不需要将14个属性全部定义出来,根据需要定义。
代码示例:
let p = {
name: 'zzh',
age: 18,
}
let handler = {set: function(obj, key, val) {
obj[key] = val;
}};
var proxy = new Proxy(p, handler);
proxy.name = 'xiao ming';
console.log(proxy.name); // xiao ming
console.log(p.name); // xiao ming
网友评论