回顾 Vue2，我们知道每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把用到的数据 property 记录为依赖，当依赖发生改变，触发 setter，则会通知 watcher，从而使关联的组件重新渲染。Vue3 在编译阶段，做了进一步优化。主要有如下：
• diff 算法优化：vue3 在 diff 算法中相比 vue2 增加了静态标记。
• 静态提升：Vue3 中对不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用。
• 事件监听缓存：默认情况下绑定事件行为会被视为动态绑定，所以每次都会去追踪它的变化。
• SSR 优化：当静态内容大到一定量级时候，会用 createStaticVNode 方法在客户端去生成一个 static node，这些静态 node，会被直接 innerHtml，就不需要创建对象，然后根
据对象渲染。
XT */) ], 64 /* STABLE_FRAGMENT */)) }
事件监听缓存
在 Vue2 中，绑定事件的行为通常被视为动态绑定，这意味着每次组件渲染时，事件监听器都会被重新创建和绑定。Vue3 引入了事件监听缓存机制，对于不变化的事件绑定，它们只会在首次渲染时创建，并在后续渲染中重用，从而避免不必要的重复绑定，提升了性能。
SSR（服务器端渲染）优化
在 Vue3 中，当静态内容达到一定数量时，Vue3 会使用 `createStaticVNode` 方法来在客户端创建一个静态节点。这些静态节点在渲染时会直接使用 innerHTML 插入，不再需要创建和操作 JavaScript 对象，这大大减少了内存消耗和渲染时间，尤其是在首屏加载时显著提高了性能。
除了上述的优化，Vue3 还引入了一些其他性能提升的特性：
1. **Composition API**
Vue3 引入了 Composition API，使得逻辑复用更加模块化和高效。开发者可以将相关的逻辑组合在一起，避免了在 Vue2 中使用混杂的选项API导致的复杂性和性能开销。
2. **Ref 和 Reactive**
Vue3 使用了响应式系统的新实现，如 `ref` 和 `reactive`，它们提供了更底层的反应性控制。`ref` 提供了直接修改原始值的能力，而 `reactive` 则用于创建响应式对象。这种改变使得数据响应更加精确，减少了不必要的计算和渲染。
3. **Teleport**
Vue3 中新增的 Teleport 功能允许组件的内容被“传送”到 DOM 中的特定位置，这样可以避免在复杂布局中嵌套过多的组件，优化渲染性能。
4. **Fragment 和 Suspense**
Vue3 允许使用 Fragment 组件，使得多个根元素可以在同一个组件内存在，减少了不必要的包装元素。Suspense 组件则提供了延迟渲染的功能，可以提前加载和预渲染组件，提高用户体验。
5. **Optimizations for Large Scale Applications**
Vue3 还针对大规模应用进行了优化，比如更好的类型检查和错误预防，以及 TypeScript 的深度集成，这些都有助于在开发阶段发现潜在问题，减少运行时的性能瓶颈。
总结来说，Vue3 的性能提升主要体现在编译阶段的优化，如 diff 算法的改进、静态提升、事件监听缓存和 SSR 优化等，以及新特性的引入，如 Composition API、Ref 和 Reactive 等，这些都显著提高了 Vue3 应用的运行效率和开发效率。对于开发大型复杂应用，Vue3 的这些优化无疑是重要的进步。
