Vue2与Vue3双向数据绑定的区别


本文介绍了Vue2与Vue3双向数据绑定的区别

Vue2.0

基于Object.defineProperty,不具备监听数组的能力,需要重新定义数组的原型来达到响应式。
Object.defineProperty 无法检测到对象属性的添加和删除 。
由于Vue会在初始化实例时对属性执行getter/setter转化,所有属性必须在data对象上存在才能让Vue将它转换为响应式。
深度监听需要一次性递归,对性能影响比较大。
每次只能监听一个属性,多个属性需要循环监听,浪费性能

Vue3.0

通过代理对象 Proxy 当为代理对象赋值的时候就修改了data对象的属性
基于Proxy和Reflect,可以原生监听数组,可以监听对象属性的添加和删除
不需要一次性遍历data的属性,可以显著提高性能
因为Proxy是ES6新增的属性,有些浏览器还不支持,只能兼容到IE11



扫描二维码,在手机上阅读

推荐阅读:

Vue3中ref和reactive的区别

Vue2和Vue3生命周期变化

评 论