2020年9月18发布正式版(rc共13版)!
1. Vue 3.0 变化
1、重写双向绑定
vue2基于Object.defineProperty()实现;vue3 基于Proxy
proxy与Object.defineProperty(obj, prop, desc)方式相比有以下优势:
- 省去for in 循环,代码更简化
- 可以监听动态新增和删除的属性;
- 可以监听数组的索引和 length 属性变化;
2、Vue3 优化Vdom
- vue2中的虚拟dom是进行全量的对比(不管dom有没有发生变化,都要进行对比;)
- 静态提升(hoistStatic),所有静态的节点都被提升到 render 方法之外.只会在应用启动的时候被创建一次,每次的渲染被不停的复用。
- patch flag, 在动态标签末尾加上相应的标记,只能带 patchFlag 的节点才被认为是动态的元素,会被追踪属性的修改,能快速的找到动态节点,而不用逐个逐层遍历,提高了虚拟dom diff的性能。
- 缓存事件处理函数cacheHandler,避免每次触发都要重新生成全新的function去更新之前的函数
- tree shaking 优化核心库体积,减少不必要的代码量
3、Vue3 Fragment
- vue3 允许我们支持多个根节点
- 同时支持render JSX 写法
- List item同时新增了Suspense teleport 和 多 v-model 用法
4、Vue3 Tree shaking
- vue3移除了一些不常用的api,例如:inline-template、filter等 使用tree-shaking
- 在Vue2中,无论我们使用什么功能,它们最终都会出现在生产代码中。主要原因是Vue实例在项目中是单例的,捆绑程序无法检测到该对象的哪些属性在代码中被使用到
- 而Vue3源码引入tree shaking特性,将全局 API 进行分块。如果你不使用其某些功能,它们将不会包含在你的基础包中,不会给你打包减少体积
5、composition Api
- Options Api包含data、methods、props等 ,开发复杂组件,同一个功能逻辑的代码被拆分到不同选项 ;使用mixin重用公用代码,也有问题:命名冲突,数据来源不清晰;
- vue3 新增的一组 api,它是基于函数的 api,可以更灵活的组织组件的逻辑。解决options api在大型项目中,不好拆分和重用的问题。
6、源码使用TS重新编写,更好的支持TS