vux3.x性能比vue2.x快1.2~2倍

①diff方法优化
②静态提升
③事件侦听器缓存
④ssr渲染

diff方法优化

vue2.0中的虚拟dom是进行全量的对比
vue3.0新增了静态标记(PatchFlag)，在于上次虚拟节点进行对比的时候，只对比带有patch flag的节点。并且可以通过flag的信息得知当前节点要对比的具体内容。

静态标记枚举类：

静态提升

vue2.0无论元素是否参与更新，每次都会重新创建，然后再渲染
vue3.0对于不参与更新的元素，会做静态提升，只会被新创建一次，在渲染时直接复用即可

事件侦听器缓存

默认情况下，onClick会被视为动态绑定，所以每次都会去追踪它的变化。但是因为事件绑定的函数是同一个函数（同一个方法），所以没有追踪变化，直接缓存起来复用即可。

//事件监听缓存未开启之前
<button @click="onClick">按钮</button>
//开启事件监听缓存之前（把静态提升关闭了也是这样）
export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock("div", null, [
    _createVNode("button", { onClick: _ctx.onClick }, "按钮", 8 /* PROPS */, ["onClick"])
  ]))
}
//开启事件监听缓存之后（把options选择为cacheHandlers）
export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock("div", null, [
    _createVNode("button", {
      onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.onClick(...args)))
    }, "按钮")
  ]))
}

验证：
【注意】转换之后的代码，大家可能还看不懂，但是不要紧。因为只需要观察有没有静态标记即可，因为在Vue3的diff算法中，只有有静态标记的才会进行比较，才会进行追踪。

ssr优化

传统的SPA单一页面响应，即客户端渲染的模式

Vue.js构建的应用程序，默认情况下是有一个html模板页，然后通过webpack打包生成一堆js、css等等资源文件。然后塞到index.html中

用户输入url访问页面 -> 先得到一个html模板页 -> 然后通过异步请求服务端数据 -> 得到服务端的数据 -> 渲染成局部页面 -> 用户

这样一来，必然延长了首屏加载的时间

SSR（服务端渲染）可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。

简单点说：就是将页面在服务端渲染完成后在客户端直接显示。无需等待所有的 JavaScript 都完成下载并执行，才显示服务器渲染的标记，所以你的用户将会更快速地看到完整渲染的页面。
ssr原理图

vue官方关于ssr的介绍
https://ssr.vuejs.org/zh/#%E4%BB%80%E4%B9%88%E6%98%AF%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E6%B8%B2%E6%9F%93-ssr-%EF%BC%9F

扩展阅读

Vue 3 相对于 Vue 2 带来了一些显著的改进和性能优势。以下是 Vue 3 比 Vue 2 更好的一些主要方面：

1. 性能提升：

   • Vue 3 的虚拟 DOM（Virtual DOM）性能更优，比 Vue 2 更快。Vue 3引入了多个性能优化，包括树懒加载、静态树提升、Diff 算法的改进等，这使得应用更快且更高效。

2. Bundle 大小更小：

   • Vue 3 的核心库更小，这有助于减小应用程序的包大小，提高加载速度。

3. Composition API：

   • Vue 3 引入了 Composition API，允许你更好地组织和重用组件逻辑。这使得代码更具可维护性，尤其对于大型项目和团队合作来说更有优势。

4. TypeScript 集成：

   • Vue 3 更容易与 TypeScript 集成，提供了更好的类型支持，帮助开发者在编码过程中更早地发现错误。

5. Teleport：

   • Vue 3 引入了 Teleport 组件，允许你将组件的内容渲染到 DOM 结构中的不同位置，有助于处理模态框、弹出菜单等需求。

6. 自定义渲染器：

   • Vue 3 的架构更加灵活，允许开发者创建自定义渲染器，这意味着你可以将 Vue 用于更多不同的环境，如移动应用、桌面应用和静态网站生成器等。

7. 更好的响应性：

   • Vue 3 的响应性系统经过改进，允许更精细的控制和更好的性能。

8. 支持 Fragment：

   • Vue 3 支持 <template> 标签内的多个根元素（Fragment），而在 Vue 2 中需要包装在一个额外的 <div> 中。

9. 更好的 TypeScript 支持：

   • Vue 3 为 TypeScript 提供更多的类型支持，包括组件、Props、Events 等方面的类型定义。

10. 全局 API 的优化：

    • Vue 3 对全局 API 的设计和性能进行了优化，提高了 Vue.js 的整体质量。

总的来说，Vue 3 延续了 Vue 2 的简单性和易用性，同时提供了更好的性能和开发体验。然而，迁移现有的 Vue 2 项目到 Vue 3 可能需要一些工作，因为引入了一些新的概念和语法。不过，这些变化通常是值得的，尤其对于新项目和需要性能优化的现有项目来说。