面试题：vue2和vue3区别、vue3项目的打包体积为什么减少40%、vue2和vue3同样可以使用TS开发，为什么vue3就易于扩展呢？vue3的摇树优化是怎么样的优化过程？

╰半橙微兮° 2024-03-16 14:35 10阅读 0赞

## 面试题：vue2和vue3区别、vue3项目的打包体积为什么减少40%、vue2和vue3同样可以使用TS开发，为什么vue3就易于扩展呢？vue3的摇树优化是怎么样的优化过程？ ##

### Vue2和Vue3的区别 ###

Vue2与Vue3在设计理念上略有差异，如下所示：

*  响应式系统：Vue3采用ES6的Proxy改写了响应式系统，可以更快地监测数据变化。同时，它还支持动态添加属性、删除属性等新特性。
 *  组件实现：Vue3采用编译时优化组件，这样可以提高运行时的性能，生成的代码也更小。
 *  编译器：Vue3将编译器独立出来，减少项目的体积，支持渲染函数以及Typescript类型声明。
 *  项目构建：Vue3默认使用了浏览器原生支持的ES模块，在打包时使用Tree Shaking去掉无用代码，从而减小的项目的体积。

### Vue3项目的打包体积为什么减少40% ###

Vue3主要采用了以下优化方案来减小项目打包体积：

*  移除不必要的代码。Vue3将vue.js拆分成多个文件进行管理，并对代码进行精简，从而进一步缩减了项目体积。
 *  优化编译器。Vue3编译器从运行时中独立出来，使得代码更好地压缩。此外，再加上ES模块、Tree Shaking以及动态Import等优化策略的应用，打包效率大为提升，大小进一步减小。
 *  改进创建VNode的API。Vue3中采用了创建虚拟DOM节点的新方式，重新设计了渲染函数的API，从而使编译出来的代码更少并且可以具有更高的性能。

这些优化方案对于Vue3项目的打包体积起到了重要的作用，让它比Vue2首个版本的体积减少了40%以上。

### Vue2和Vue3同样可以使用TS开发，为什么Vue3就易于扩展呢？ ###

Vue3本身就是用Typescript开发的，因此对于Typescript的支持更加友好。除此之外，Vue3还带来了许多优化和改进，包括设计模式的优化，增加Composition API和Teleport等新特性。

其中，Composition API看似与Options API差异不是很大，但其实它为我们提供了更好的代码组织方案，例如，我们可以将数据逻辑、方法逻辑抽象到不同的函数中，并在需要时进行复用、共享。这种方式使得代码更易于维护和扩展，同时也可以避免混杂在一个功能内的逻辑过于繁琐、缺少清晰度的问题。

### Vue3的摇树优化是怎样的优化过程？ ###

摇树优化（tree-shaking）是指在打包时只保留项目中用到的代码，去掉所有多余的代码。Vue3采用了基于静态分析和ES模块机制来进行摇树优化。

具体地：

*  第一步：使用ESLint和Typescript在编译期间进行静态分析，检测出没有被使用的代码，并删除这部分无用的代码。
 *  第二步：通过使用ES模块，实现按需加载的效果。而ES模块支持Tree Shaking，能够将打包好的模块切割成更小的部分，仅加载需要的特定部分。

Vue3还针对Twiggy算法进行了优化，可以在保证排除未引用代码的同时，最大限度地优化编化了编译后的代码大小。Twiggy算法可以分析出代码中哪些部分是瓶颈，哪些是无用的代码，从而帮助我们更好地进行Tree Shaking。

总之，Vue3在很多方面都对前端开发提供了优化和改进，使得它更加易于使用、扩展和维护。同时，Vue3还采用了Tree Shaking等技术来提升性能和减少打包体积，这些特点也让Vue3备受青睐，成为了目前前端框架中的佼佼者。