Vue3的6个优势

1. Vue3使用TS重构了项目，获得更好的类型支持

2. 重构了响应式系统

Vue3使用Proxy替换Object.defineProperty，重构了Vue的响应式系统；解决了Vue2.x中存在的响应性问题

包括：

• 可的直接监听数组类型的数据变化
• 监听的目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升
• 更强大的拦截功能，拦截器包括get、set、has、deleteProperty、ownKeys、getOwnPropertyDescriptor、defineProperty、preventExtensions、getPrototypeOf、isExtensible、setPrototypeOf、apply、construct13种

3. 引入了Composition API

vue3.0中引入了composition API，专门用于解决功能、数据和业务逻辑分散的问题，使项目更益于模块化开发以及后期维护

它的核心是setup函数，这样做的好处是，当应用变得复杂一点时，我可以将功能对应的数据和业务逻辑抽离出来，需要是import，以至于更好的逻辑复用和代码组织

4. 优化了Virtual DOM

包括：

• 模板编译时的优化；将一些静态节点编译成常量
• slot优化；将slot编译为lazy函数，将slot的渲染的决定权交给子组件
• 模板中内联事件的提取并重用（原本每次渲染都重新生成内联函数）

5. 更好的Tree shaking

引入尤大的原话：

Tree-shaking其实就是把无用的模块进行“剪枝”，很多没有用到的API就不会打包到最后的包里

事实上，Tree shaking并不是Vue3新增的东西，它是打包工具如webpack或者rollup的功能，但是由于Vue3代码结构调整，把vue本身当一个对象去操作，这样的结果是，使得一些可能不会用到的功能就可以被tree shaking掉，从而使得体积更小

主要原理：依赖es6的模块化的语法，将无用的代码(dead-code)进行剔除

6. <script setup>