vue2和vue3的底层逻辑原理、区别、用法以及应用优缺点
原理 | 应用优缺点 | |
vue2 | 使用Object.defineProperty()来劫持各个属性的setter/getter,在数据发生改变时通知订阅者更新视图 | 1.无法检测对象属性的删除和添加 2.无法检测数组内部的变化,vue2通过重写数组的方法来实现数组的响应式 3.需要遍历整个对象,如果对象嵌套太深需要递归遍历,性能下降 |
vue3 | 使用Proxy来劫持整个对象,从而实现响应式 | 1.可以监听数组对象的变化,不需要遍历整个对象性能更好; 2.ref API可以监听基本数据类型的变化 |
vue2常见的问题改变数据不更新视图,这是因为vue2响应式机制的实现,vue2受限于object.defineProperty,需要通过辅助方法弥补(例如Vue.$set)
vue2使用object.defineProperty实现响应式,仅对对象初始化时的属性进行监听,如果新增或删除未被定义的setter/getter,就无法触发视图更新
解决方案:
新增属性:使用this.$set(对象, "属性", 属性值);
删除属性:使用this.$delete(对象, "属性");
整体替换:this.obj = { ...对象, 属性: 属性值 };