我想请问，vue3到底比vue2好到哪里vue3中有三个比较核心的模块 Reactivity Module ——数据响应

vue3中有三个比较核心的模块

Reactivity Module ——数据响应性处理
Compiler Module ——将单文件组件的template编译成render函数
Render Module —— 负责将Virtual DOM 生成 DOM Node并挂载页面主要分三个阶段工作：
- render阶段 —— 执行render返回VNode
- mount阶段 ——通过VNode创建 DOM Node 并挂载
- patch阶段 —— 对比新旧VNode 并更新 DOM

属性对象参数的写法优化
- 在Vue2中：需要用户区分事件、DOM属性、组件属性、attribute等，要将对应的属性写在对应的类别中。
- 在Vue3中：无需用户区分，扁平结构，直接写即可，Vue会帮我们智能的进行绑定👍🏻
render函数的第一个参数不再是渲染函数

静态DOM节点Hosited
- 1. patch的时候无需关注这些静态节点，提升patch的速度。在Vue2的时候，我们会去对比新旧虚拟DOM，不论这个节点是不是包含动态的内容都会去遍历对比，显然静态的节点是非常没有必要对比的（它不会消失，也不会变化）。
- 1. 静态节点只会被创建一次，后面都是重用，减少了重复创建、回收的开销。
动态节点及动态属性识别
- compiler在将template转化渲染函数时会生成一些辅助性的标识组件来提升更新的速度
- 在Vue2中没有这些辅助的标识帮助我们识别哪些属性是可以跳过不处理的，所以会对整个节点的所有属性都去检查是否变更，当节点数量多了以后无疑会造成阻塞或者卡顿，Vue3做到了，只检查可能会变化的那些属性，极大的提升了性能。

编译生成的render函数中有openBlock，其作用是用来收集某个block内的动态子节点，最终这个block上会生成一个存着该block内动态节点的扁平数组。这样就更进一步的缩小了组件更新时的新旧VNode的对比范围，也进一步提升了性能。

vue3使用Proxy来实现状态变更的拦截，想比vue2使用Object.defineProperty实现，优点如下：
1. Object.defineProperty是通过给对象新增属性/修改现有属性来实现 getter/setter 的拦截。需要遍历对象的每一个key去实现，当遇到很大的对象或者嵌套层级很深的对象，性能问题会很明显。而Proxy则是通过在对象的访问前架设拦截，是完完全全的代理模式，性能远远优于Object.defineProperty这种方式。
2. Object.defineProperty这种方式无法拦截到给对象新增属性这种操作，因为组件初始化不能预知会新增哪些属性，也就没法设置getter/setter，所以我们不得不使用Vue2提供的$setapi，再去Object.defineProperty给新增的属性加上getter/setter。而使用Proxy无需关心这个问题。
3. Proxy天然支持Array，无需再去拦截会改变原数组的那些原型方法（shift、unshift、push、pop、sort、splice、reverse），甚至你支持修改数组的length也会被拦截。
4. Proxy不支持IE，啥年代了，这应该也是个优点。

在vue2，我们常常通过mixin来实现代码逻辑的复用，但存在一点问题：
- 1. 变量来源不清，当我们没有注意到当前组件的mixin选项，我们可能看到一些当前组件没有定义的属性、方法，很可能会懵。当存在多个mixin，变量和方法的来源变得更加不清
- 2.变量和方法命名冲突，当存在多个mixin，变量和方法冲突变得极其容易
在 setup中，我们可以像编写普通的 JavaScript 那样来编写组件代码，我们的逻辑都是一个一个的变量或者函数，所以我们在写Composition Api的代码时可运用上所有JavaScript代码组织的最佳实践，很轻松的对这些函数拆分，提取以达到复用的目的。

一方面<script setup> 形式书写的组件模板被编译为了一个内联函数，和 <script setup> 中的代码位于同一作用域。不像options api需要依赖 this 上下文对象访问属性，被编译的模板可以直接访问 <script setup> 中定义的变量，无需从实例中代理。这对代码压缩更友好，因为本地变量的名字可以被压缩，但对象的属性名则不能。

vue3对tree shaking的支持比较好，更小的生产代码体积

会马上执行这个函数，并且函数内的所有响应式值的dep会添加这个effect // 当函数内任意一个响应式值变更，都会重新执行这个effect