vue3.0中的双向数据绑定方法及优缺点
熟悉vue的人都知道在vue2.x之前都是使用object.defineProperty来实现双向数据绑定的
而在vue3.0中这个方法被取代了
1.为什么要替换Object.defineProperty
替换不是因为不好，是因为有更好的方法使用效率更高
Object.defineProperty的缺点：
1.在Vue中，Object.defineProperty无法监控到数组下标的变化，
导致直接通过数组的下标给数组设置值，不能实时响应。
push() pop() shift() unshift() splice() sort() reverse()
2.Object.defineProperty只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。
Vue里，是通过递归以及遍历data对象来实现对数据的监控的，
如果属性值也是对象那么需要深度遍历,显然如果能劫持一个完整的对象，不管是对操作性还是性能都会有一个很大的提升。
而要取代它的Proxy有以下两个优点：
1.可以劫持整个对象，并返回一个新对象
2.有13种劫持操作
2.什么是Proxy
Proxy是ES6中新增的一个特性，翻译过来意思是"代理"，用在这里表示由它来“代理”某些操作。Proxy让我们能够以简洁易懂的方式控制外部对对象的访问。其功能非常类似于设计模式中的代理模式。
Proxy可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
使用Proxy的核心优点是可以交由它来处理一些非核心逻辑（如：读取或设置对象的某些属性前记录日志；设置对象的某些属性值前，需要验证；某些属性的访问控制等）。从而可以让对象只需关注于核心逻辑，达到关注点分离，降低对象复杂度等目的。
基本用法：
letp=newProxy(target,handler);
参数：
target:是用Proxy包装的被代理对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
handler:是一个对象，其声明了代理target的一些操作，其属性是当执行一个操作时定义代理的行为的函数。
p是Proxy对象，当其他操作对p进行更改的时候，会执行handler对象的方法。Proxy有13种数据劫持的操作，常用的handler处理方法：
get:读取值，
set:获取值，
has:判断对象是否拥有该属性，
construct:构造函数
举个例子：
letobj={};
lethandler={
get(target,property){
console.log(`${property}被读取`);
returnpropertyintarget?target[property]:3;
},
set(target,property,value){
console.log(`${property}被设置为${value}`);
target[property]=value;
}
}
letp=newProxy(obj,handler);
p.name='tom'//name被设置为tom
p.age;//age被读取3
更多的Proxy属性方法参考MDNProxy
3.Proxy实现数据劫持
observe(data){
constthat=this;
lethandler={
get(target,property){
returntarget[property];
},
set(target,key,value){
letres=Reflect.set(target,key,value);
that.subscribe[key].map(item=>{
item.update();
});
returnres;
}
}
this.$data=newProxy(data,handler);
}
这段代码里把代理器返回的对象代理到this.$data，即this.$data是代理后的对象，外部每次对this.$data进行操作时，实际上执行的是这段代码里handler对象上的方法。
注：这儿用到了reflect属性，这也是ES6里面的，不知道的去这儿看看吧。reflect属性
总结
以上所述是小编给大家介绍的vue3.0中的双向数据绑定方法及优缺点,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！