Vue2.0和Vue3.0响应式原理对比
-
Vue2.0 中使用ES5中的 Object.defineProperty 方法实现响应式数据
缺点:
(1)无法检测到对象属性的动态添加和删除。
(2)无法监听到数组的下标和长度的变更。
解决方案:
(1)Vue2.0提供Vue.set方法用于动态给对象添加属性。
(2)Vue2.0提供Vue.delete方法用于动态删除对象的属性。
(3)重新vue中数组的方法,用于检测数组的变更。 -
Vue3.0中使用ES6中的proxy语法实现响应式数据
优点:
(1)可以检测到代理对象属性的动态添加和删除。
(2)可以检测到数组下标和长度的变更。
缺点:
(1)ES6的proxy语法对于低版本的浏览器不支持。
(2)Vue3.0会针对IE11出一个特殊的版本用于支持IE11。