Vue 3.0 性能提升主要体现在哪里？

⚡ 速记答案（30 秒）

Proxy 响应式更快、更少边界问题。编译优化：静态提升、Patch Flag、更好的 diff。更小体积：按模块拆分 + tree-shaking。更优渲染：Fragment、Teleport、更高效的事件处理。

📖 详细讲解

标准面试回答（推荐记住）

Vue 3 性能提升来自多个方面：Proxy 代替 defineProperty，初始化更快，原生支持新增属性；编译时做静态提升、生成 Patch Flag 指导运行时 diff；代码按模块拆分支持 tree-shaking 减小包体积；新特性如 Fragment 减少无意义节点、Teleport 优化弹窗渲染等。

优化点详解

响应式系统升级 (Proxy)
- 移除递归遍历，改为懒代理，初始化速度大幅提升。
- 内存占用减半。
编译时优化 (Compile-time Optimizations)
- Static Hoisting: 静态节点提升。
- PatchFlags: 标记动态内容，Diff 时只比对变化部分。
- Block Tree: 收集动态子节点，跳过静态层级遍历。
源码体积 (Tree-shaking)
- 核心 API 全部模块化 (createApp, ref, computed)，未使用的功能不会打包。
- 移除了冷门特性 (filter, inline-template)。
SSR 优化
- 字符串拼接代替 VNode 创建，大幅提升服务端渲染性能。

✅ 面试要点

•理解各项优化的原理
•知道 Patch Flag 的作用
•能解释 tree-shaking 的好处

💻 代码示例

编译优化示例

// 静态提升 - 静态节点只创建一次
const _hoisted_1 = { class: "static" }
const _hoisted_2 = createVNode("span", null, "Static Text")

function render() {
  return createVNode("div", _hoisted_1, [
    _hoisted_2,  // 复用静态节点
    createVNode("span", null, toDisplayString(dynamic), 1 /* TEXT */)
  ])
}

// Patch Flag 标记动态内容
// 1 = TEXT (文本变化)
// 2 = CLASS (class 变化)
// 4 = STYLE (style 变化)
// 8 = PROPS (props 变化)
// 32 = HYDRATE_EVENTS (事件)