1、vue2使用Object.defineProperty方法实现响应式数据,vue3使用proxy实现响应式数据
Object.defineProperty的缺点:
无法检测到对象属性的动态添加和删除
无法检测到数组的下标和length属性的变更
解决方法:
vue2提供Vue.$set动态给对象添加属性
Vue.$delete动态删除对象属性
重写数组的方法,检测数组变更
proxy的缺点:
es6的proxy不支持低版本浏览器(IE11)
会针对IE11出一个特殊版本进行支持
proxy的优点:
可以坚持到代理对象属性的动态新增和删除
可以监测到数组的下标和length属性的变化
2、vue3新特性:
①:数据响应重新实现(ES6的proxy代替ES5的Object.defineProperty)
②:源码使用ts重写,更好的类型推导
③:虚拟DOM新算法(更快、更小)
更快
1、virtual DOM 完全重写,mounting & patching 提速 100%;
2、更多编译时 (compile-time)提醒以减少 runtime 开销;
3、基于 Proxy 观察者机制以满足全语言覆盖以及更好的性能;
4、放弃 Object.defineProperty ,使用更快的原生 Proxy;
5、组件实例初始化速度提高 100%;
6、提速一倍/内存使用降低一半;
更小
1、Tree-shaking 更友好;
2、新的 core runtime:~ 10kb gzipped
④:提供了composition api,为更好的逻辑复用与代码组织
⑤:自定义渲染器(app、小程序、游戏开发)
⑥:Fragment,模板可以有多个根元素