vue2.x与vue3.0_proxy与Object.defineProperty()的区别
程序员文章站
2022-03-06 18:58:22
...
(1)2.0中递归遍历data中的数据,使用 Object.defineProperty()劫持 getter和setter,在getter中做数据依赖收集处理,在setter中 监听数据的变化,并通知订阅当前数据的地方。
-
检测不到对象属性的添加和删除,当前新加的这个属性并没有加入vue检测数据更新的机制(因为是在初始化之后添加的)。
注:vue. s e t 是 能 让 v u e 知 道 你 添 加 了 属 性 , 它 会 给 你 做 处 理 , set是能让vue知道你添加了属性, 它会给你做处理, set是能让vue知道你添加了属性,它会给你做处理,set内部也是通过调用Object.defineProperty()去处理的。 -
无法监控到数组下标的变化,导致直接通过数组的下标给数组设置值,不能实时响应。
-
当data中数据比较多且层级很深的时候,会有性能问题,因为要遍历data中所有的数据并给其设置成响应式的。
(2)3.0中采用proxy对对象进行拦截(代理原型直接对原型进行更改),无论新增访问删除都必须通过拦截
- Reflect(ES6引入) 是一个内置的对象,reflect提供拦截javaScript的操作方法,将Object对象一些明显属于语言内部方法(比如Object.defineProperty(),get(),set()等)放到Reflect对象上修改某些Object方法的返回结果,让其变得更合理。让Object操作都变成函数行为
(3)总结
- Proxy是用来操作对象的,拓展对象的能力。Object.defineProperty() 是对对象属性进行操作。
- vue2.x使用 Object.defineProperty()实现数据的响应式,但是由于 Object.defineProperty()是
对对象属性的操作,所以需要对对象进行深度遍历去对属性进行操作 - vue3.0 用 Proxy 是对对象进行拦截操作,无论是对对象做什么样的操作都会走到 Proxy 的处理逻辑中
如:
//Object.defineProperty()实现
class Observer {
constructor(data) {
// 遍历参数data的属性,给添加到this上
for(let key of Object.keys(data)) {
if(typeof data[key] === 'object') {
data[key] = new Observer(data[key]);
}
Object.defineProperty(this, key, {
enumerable: true,
configurable: true,
get() {
console.log('你查看了' + key);
return data[key]; // 中括号法可以用变量作为属性名,而点方法不可以;
},
set(newVal) {
console.log('你新增了' + key);
console.log('新的' + key + '=' + newVal);
if(newVal === data[key]) {
return;
}
data[key] = newVal;
}
})
}
}
}
const obj = {
name: 'app',
age: '18',
a: {
b: 1,
c: 2,
},
}
const define= new Observer(obj);
define.age = 20;
console.log(define.age);
define.newPropKey = '新属性';
console.log(define.newPropKey);
//Proxy 实现
const obj = {
name: 'app',
age: '18',
a: {
b: 1,
c: 2,
},
}
const proxy = new Proxy(obj, {
get(target, propKey, receiver) {
console.log('你查看了' + propKey);
return Reflect.get(target, propKey, receiver);
},
set(target, propKey, value, receiver) {
console.log('你新增了' + propKey);
console.log('新的' + propKey + '=' + value);
Reflect.set(target, propKey, value, receiver);
}
});
proxy.age = '20';
console.log(proxy.age);
proxy.newPropKey = '新属性';
console.log(proxy.newPropKey);
下一篇: TLS OpenSSL 证书验证