1."新"
在 API 特性方面:
Composition API:可以更好的逻辑复用和代码组织,同一功能的代码不至于像以前一样太分散,虽然Vue2中可以用minxin来实现复用代码,但也存在问题,比如:方法或属性名会冲突、代码来源也不清楚等SFC Composition API语法糖:Teleport传送门:可以让子组件能够在视觉上跳出父组件(如父组件overflow:hidden)Fragments:支持多个根节点,Vue2中,编写每个组件都需要一个父级标签进行包裹,而Vue3不需要,内部会默认添加Fragments;SFC CSS变量:支持在<style></style>里使用v-bind,给CSS绑定JS变量(color: v-bind(str)),且支持JS表达式 (需要用引号包裹起来);Suspense:可以在组件渲染之前的等待时间显示指定内容,比如loading;v-memo:新增指令可以缓存html模板,比如v-for列表不会变化的就缓存,简单说就是用内存换时间
在 框架 设计层面:
- 代码打包体积更小:许多
Vue的API可以被Tree-Shaking,因为使用了es6module,tree-shaking依赖于es6模块的静态结构特性; - 响应式的优化:用
Proxy代替Object.defineProperty,可以监听到数组下标变化,及对象新增属性,因为监听的不是对象属性,而是对象本身,还可拦截apply、has等方法; - 虚拟DOM的优化:保存静态节点直接复用(静态提升)、以及添加更新类型标记(
patchflag)(动态绑定的元素)- 静态提升:静态提升就是不参与更新的静态节点,只会创建一次,在之后每次渲染的时候会不停的被复用;
- 更新类型标记:在对比
VNode的时候,只对比带有更新类型标记的节点,大大减少了对比Vnode时需要遍历的节点数量;还可以通过flag的信息得知当前节点需要对比的内容类型; - 优化的效果:
Vue3的渲染效率不再和模板大小成正比,而是与模板中的动态节点数量成正比;
Diff算法 的优化:Diff算法使用最长递增子序列优化了对比流程,使得虚拟DOM生成速度提升200%
在 兼容性 方面:
Vue3不兼容IE11,因为IE11不兼容Proxy
其余
v-if的优先级高于v-for,不会再出现vue2的v-for,v-if混用问题;vue3中v-model可以以v-model:xxx的形式使用多次,而vue2中只能使用一次;多次绑定需要使用syncVue3用TS编写,使得对外暴露的api更容易结合TypeScript。
2.watch 与 watchEffect
- watch作用是对传入的某个或多个值的变化进行监听;触发时会返回新值和老值;也就是说第一次不会执行,只有变化时才会重新执行
- watchEffect是传入一个立即执行函数,所以默认第一次也会执行一次;不需要传入监听内容,会自动收集函数内的数据源作为依赖,在依赖变化的时候又会重新执行该函数,如果没有依赖就不会执行;而且不会返回变化前后的新值和老值
watch加Immediate也可以立即执行
3.Fragments
Fragments 的出现,让 Vue3 一个组件可以有多个根节点(Vue2 一个组件只允许有一个根节点)
- 因为虚拟
DOM是单根树形结构的,patch方法在遍历的时候从根节点开始遍历,这就要求了只有一个根节点; - 而
Vue3允许多个根节点,就是因为引入了Fragment,这是一个抽象的节点,如果发现组件是多根的,就会创建一个Fragment节点,将多根节点作为它的children;
4.Teleport传送门
Teleport是vue3推出的新功能,也就是传送的意思,可以更改dom渲染的位置。
比如日常开发中很多子组件会用到dialog,此时dialog就会被嵌到一层层子组件内部,处理嵌套组件的定位、z-index和样式都变得困难。Dialog从用户感知的层面,应该是一个独立的组件,我们可以用<Teleport>包裹Dialog, 此时就建立了一个传送门,传送到任何地方:<teleport to="#footer">