Vue3优化功能总结

重构vue的原因

1、主流浏览器对js新特性的支持。其中有部分可以极大提高vue性能 2、vue2架构本身存在的缺陷。生成正确source-map具有挑战性；高阶渲染函数编写不灵活；高内聚低耦合有待加强

vue3进化历程

1、类型检查切换到typescript 2、内部包解耦使模块之间的依赖关系更加明确，使它更易于被开发者阅读、理解和修改 3、启用了RFC(Request For Comments)流程。每个RFC使用一个固定模板，包括方案目的、设计细节、方案权衡和采用的策略。确保用户能对重大变化提供反馈

更快-编译器的优化

在Vue 3中，使用更合适的AST转换管道（AST transform pipeline）重写了编译器，它使得我们能以转换插件的形式进行编译时优化。

编译器生成带优化提示的代码，运行时使用这些优化提示采取尽可能快的更新策略。细节方面主要从以下三点进行： 1、在没有改变树结构的指令下，节点结构是完全静态的。将模板划分为由这些指令分割的嵌套“块”，每个块中的节点又是静态的。这样在更新一个块内的节点时，不需要递归遍历整个树，块内的动态绑定可以在一维数组中查找到。规避了虚拟dom diff的大部分开销。 2、编译器会主动监测模板中的静态节点、静态子树甚至数据对象，并把他们提取到结果代码的渲染函数之外。避免渲染函数重新创建这些对象，极大降低内存使用，减少垃圾回收频率。 3、更细致的优化标志。如有动态class的元素会被标记为只需要进行类名检查

通过上述等优化Vue 3占用的CPU时间还不到Vue 2的十分之一

更小- Tree-shaking

把大部分全局API和内置帮助程序（internal helpers）转移到ES模块中来实现这一点。这允许现代打包器静态地分析模块依赖关系，并删除与未使用的特性相关的代码。模板编译器也可以生成tree-shaking友好的代码，它只会在模板中实际使用了该特性时才导入与该特性相关的帮助程序。 Vue 3的基准体积（框架中的一些部分永远不能被tree-shaking，因为它们对任何一个应用都是必要的）用gzip压缩后只有大约10KB - 比Vue 2的一半还小。