一.vue3 新特性
- 数据响应重新实现(ES6 的 proxy 代替 Es5 的 Object.defineProperty)
- 源码使用 ts 重写,更好的类型推导
- 虚拟 DOM 新算法(更快,更小)
- 提供了 composition api,为更好的逻辑复用与代码组织
- 自定义渲染器(app、小程序、游戏开发)
- Fragment,模板可以有多个根元素
二.vue2 vue3 响应原理对比
1. vue2 使用 Object.defineProperty()方法实现响应式数据
2. 缺点:
- 无法检测到对象属性的动态添加和删除
- 无法检测到数组的下标和 length 属性的变更
3. 解决方案:
- vue2 提供 Vue.$set 动态给对象添加属性
- Vue.$delete 动态删除对象属性
- 重写数组的方法,检测数组变更
1.vue3 使用 proxy 实现响应式数据
2.优点:
- 可以检测到代理对象属性的动态新增和删除
- 可以见到测数组的下标和 length 属性的变化
3.缺点:
- es6 的 proxy 不支持低版本浏览器 IE11
- 回针对 IE11 出一个特殊版本进行支持