[vue] 第1463天 为什么vue3会比vue2性能高？

[haizhilin2013]

第1463天 为什么vue3会比vue2性能高？

5400

3+1官网

我也要出题

[hikerw]

Vue 3 相比 Vue 2 具有更高的性能，主要有以下几点原因：

更好的模板编译 与 Vue 2 的模板编译相比，Vue 3 的模板编译器经过重新设计，采用更先进的编译技术，编译速度更快，生成的代码更小，模板性能也更高。

更快的渲染 Vue 3 的渲染引擎采用了 Proxy 直接代理数据对象，从而避免了对数据对象的递归遍历，带来更快的渲染速度。另外，Vue 3 内部使用了更先进的依赖追踪机制，对于组件中哪些数据发生了变化，能够更准确地追踪，从而避免了不必要的重新渲染，提高了性能。

更小的包体积 Vue 3 的整体代码量更小，运行时包大小比 Vue 2 减少了 41%，这意味着更快的下载速度和更流畅的用户体验。

更多的 TypeScript 支持 Vue 3 内置对 TypeScript 的支持，提供了更好的类型检查和代码提示，帮助开发人员提早发现潜在的问题，提高了开发的效率和代码的质量。

总之，Vue 3 在编译速度、渲染速度、包体积和 TypeScript 支持方面都得到了提升，因此比 Vue 2 性能更高。

[Cai-zhiji]

参考资料

vue3.0为什么性能会比2.x快

虚拟dom的优化

通过引入静态树提升（Static Tree Hoisting）和基于模块的编译，Vue 3能够生成更高效的渲染函数，减少不必要的运行时开销。这使得Vue 3在渲染性能上比Vue 2更高效。

编译器优化

Vue 3的编译器进行了重写，采用了更快、更轻量级的编译器。编译器的改进使得Vue 3能够更快地将模板转换为渲染函数，提高了应用的初始化速度。

Proxy代理的使用

Vue 3在响应式系统中采用了ES6的Proxy代理，相较于Vue 2中的Object.defineProperty，Proxy代理能够更细粒度地追踪属性的变化，并且具有更好的性能表现。

Tree-shaking支持

Vue 3通过优化模块的导出方式，使得工具如Webpack在构建时能够更好地进行Tree-shaking，只保留应用实际使用的代码，减小了应用的体积。

更高效的组件更新

Vue 3在组件更新时进行了一些优化，使用了更细粒度的触发机制，减少了不必要的组件更新和渲染开销。

[WangLiqing0713]

1.V3采用新的渲染引擎，在大型应用程序中更快。 2.语法更简单，使代码更容易维护 3.更加模块化的设计，把组件分开，使其更灵活 4.TypeScript 支持 5.Composition API