vue3的数据双向绑定与vue2的区别
通俗的讲vue3优势：
vue3 性能 提升了1.3 ~ 2倍，SSR性能提升了2 ~ 3倍。
为什么快呢？
其中一点取决于 “数据双向绑定” 的优化 =>
| vue3 | vue2 | |
|---|---|---|
| 原理 | proxy (代理对象) + Reflect (反射) | Object.defineProperty |
| 用法 | 通过ref和reactive，自动转换 | 在data函数注册 |
| 优缺点 | 1.proxy对象监听整个对象，属性变化就能监听 不须要遍历对象的每个属性 2.vue3 互取最优引用数据类型采用proxy， 基本数据类型用Object.defineProperty, |
1. Object.defineProperty方法只监听 一个属性 ，所以对于 引用数据类型，需要通过遍历对象的每个属性进行监听 2.不能监听数组的变化(修改原数组的方法，set无法监听） vue2.0是通过标记这些方法 重构的形式实现(数组劫持) |
详情
vue2 数据双向绑定 =>实现过程：
=> 监听一个属性
var obj = {
_a:123} //必须要临时变量 监听一个属性
Object.defineProperty(obj, "a", {
get() {
return obj._a; }, 通过b遍历_b ,通过 b返回_b
set(val) {
obj._a = val; },
});
= > 所以必须需要遍历对象的每个属性创建一个Object.defineProperty 消耗资源较大
vue3 数据双向绑定 =>实现过程：
= > 监听整个对象
const proxy1 = new Proxy( {
a:1 },{
get : function(obj,key,receiver){
return Reflect.get(obj, key,receiver)
},
set : function(obj,key,value,receiver){
return Reflect.set(obj, key, value, receiver)
}
})
= > Reflect和Object类似Object上的一下方法同样也部署在Reflect上，未来的新方法只部署在Reflect ，不在Object上。
