vue3的数据双向绑定与vue2的区别

通俗的讲vue3优势：
vue3 性能 提升了1.3 ~ 2倍，SSR性能提升了2 ~ 3倍。

为什么快呢？

其中一点取决于 “数据双向绑定” 的优化 =>

详情

vue2 数据双向绑定 =>实现过程：

=> 监听一个属性 

var obj = { _a:123} //必须要临时变量    监听一个属性
Object.defineProperty(obj, "a", {
  get() { return obj._a; },  通过b遍历_b ,通过  b返回_b
  set(val) {obj._a = val; },
});

= > 所以必须需要遍历对象的每个属性创建一个Object.defineProperty 消耗资源较大
1
2
3
4
5
6
7
8
9

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上。
1
2
3
4
5
6
7
8
9
10
11
12