Vue3对比Vue2的优势

一、优化diff算法

Vue2中的虚拟dom是全量的对比，每个节点不论是动态的还是静态的都会逐层比较。

Vue3新增了静态标记patchflag，与上次虚拟dom对比时只对比带有patchflag的节点(即动态节点)。

二、hoistStatic静态提升

Vue3相比Vue2新增了静态提升。Vue2无论元素是否更新，每次都会重新创建再渲染。

Vue3对于不参与更新的元素进行静态提升，只创建一次，在渲染时直接复用。

静态提升过程：

1. AST 解析

2. 静态分析并标记静态节点

3. 排序静态节点并为它们生成代码

4. 将生成的代码插入到渲染函数中，达到静态提升的效果

三、cacheHandlers事件侦听器缓存

Vue2绑定事件每次触发都要重新生成function去更新。

而Vue3中提供了事件缓存对象cacheHandlers，当cacheHandlers开启时会自动生成一个内联函数以及一个静态节点。当事件再次触发时，只需从缓存中调用无需再次更新。

（默认onClick会被视为动态绑定，故每次都会追踪变化，但同一函数没必要追踪变化，缓存复用即可）

四、SSR渲染

Vue3的SSR渲染相比于Vue2的SSR渲染性能方面有更好的提升，Vue2使用vue-server-renderer包来进行服务器端渲染。

Vue3中已经将服务器端渲染功能整合到了Vue核心库中。当存在大量静态内容时，这些内容会被当作纯字符串推进一个 buffer 里面，即使存在动态的绑定，也会通过模版插值潜入进去。这样会比通过虚拟 dmo 渲染快得多。

五、更好的TS支持

Vue2不适合使用TS，因为Vue2是Option API风格，而TS是一种类型系统，面向对象的语法，两者不匹配。

Vue3中量身打造了defineComponent函数使组件在TS下更好的利用参数类型推断。

六、Compostion API

Vue2组件内使用的是Option API，容易使逻辑分散。

Vue3中使用的是组合式API/注入API，使用setup函数。

七、自定义渲染API

Vue2架构对于weex和myvue等渲染到不同平台不太友好。

由于Vue官方实现的createApp会将template映射成html代码，若不想渲染成html代码时，需要用到Custom Render API来定义自己的render渲染生成函数。而Vue3使用自定义渲染API就可以完美的解决此类问题。

八、按需编译，体积比Vue2更小

Vue3中通过将大多数全局API和内部帮助程序移至ES模块导出，使得打包工具可以静态分析模块依赖性并删除未使用的导出相应的代码。

九、支持多根节点组件

Vue2中不支持多根组件，当用户意外创建多根组件会发出警告。

Vue3一个模板不再限制有多个根节点(多根节点Attribute继承)，可以支持多根节点组件。

小结

对于Vue来说，Vue3的高级给予、组合式API和类型推断都是质的提升。同时越来越多的大型项目对TS友好，Vue3的发展前景还是十分广阔的。