Vue3 的新特性

Vue3 的新特性

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%。

兼容性

• 因为Proxy是ES6的API，所以Vue3不兼容IE11。

其他 特点

• Vue3的v-if的优先级高于v-for，不会再出现vue2的v-for，v-if混用问题；
• 在vue3中的v-model可以使用多次，而vue2中只能使用一次；多次绑定需要使用sync
• Vue3 支持TS编写，使得对外暴露的api更容易结合TS；