10.2 Vue 3 新特性：能力与性能账本
文档摘要
10.2 Vue 3 新特性：能力与性能账本 本节摘要：Vue 3 的新特性分两类——表达能力的新件（多根、Teleport、Suspense）与管线性能的升级（静态提升、补丁标志、Proxy 响应式）。本节把性能项逐条对应回前面章节的原理，能力项配使用场景，最后给出官方迁移构建的路线。 学习目标 阅读完本节，你应当能够： 逐条说清三大编译优化如何分别削减渲染与 diff 成本； 用 Teleport 解决弹层层级问题、用 Suspense 管理异步依赖； 列出从 Vue 2 迁移时的破坏性变更清单； 评估自己项目升级 Vue 3 的性能收益是否显著。 一、性能账本：编译器替你做了第 9 章的事 静态提升（hoistStatic）。
10.2 Vue 3 新特性：能力与性能账本
本节摘要：Vue 3 的新特性分两类——表达能力的新件（多根、Teleport、Suspense）与管线性能的升级（静态提升、补丁标志、Proxy 响应式）。本节把性能项逐条对应回前面章节的原理，能力项配使用场景，最后给出官方迁移构建的路线。
学习目标
阅读完本节，你应当能够：
- 逐条说清三大编译优化如何分别削减渲染与 diff 成本；
- 用 Teleport 解决弹层层级问题、用 Suspense 管理异步依赖；
- 列出从 Vue 2 迁移时的破坏性变更清单；
- 评估自己项目升级 Vue 3 的性能收益是否显著。
一、性能账本：编译器替你做了第 9 章的事
静态提升（hoistStatic）。模板里不变的节点，其 vnode 创建被提出渲染函数外，只创建一次复用引用：
// 编译产物示意 const _hoisted_1 = createElementVNode("h1", null, "固定标题"); // 提升到模块层 function render() { return createElementVNode("div", null, [ _hoisted_1, // 每次渲染直接引用，零新建 createElementVNode("p", null, toDisplayString(msg)) // 动态的才进函数体 ]); }
第 3 章说过：编译期确定的定死。静态提升把这个原则推进到 vnode 层面。
补丁标志（PatchFlags）。编译器给动态节点打上"我只会有哪类变化"的标签：
createElementVNode("p", null, toDisplayString(msg), 1 /* TEXT */) // 数字 1 是补丁标志：这个节点只有文本可能变
diff 时带 TEXT 标志的节点只比文本、带 CLASS 的只比类名——第 4 章的"逐属性全量比对"被编译信息裁剪成"只比会变的部分"，动态内容越少收益越大。
事件缓存（cacheHandlers）。内联事件处理器被缓存，更新时属性比对发现引用未变，连事件重绑都省了。
三者共同的含义：Vue 3 把第 9 章很多人工优化（记忆化、跳过静态区）做进了编译器，且只有预编译的单文件组件项目享受得到——CDN 现场编译走的是完整运行时，这再次印证第 3 章的结论。
响应式侧的升级第 2 章已详述（Proxy 根治盲区、惰性深代理），此处只补一条：响应式 API 全面开放——reactive、ref、computed、effect 不再是组件内部的私有机制，任何模块都能 import 使用。Pinia、组合函数、甚至非组件工具库都建立在这层公开 API 上，这是 Vue 3 生态繁荣的底座。
二、三个新表达能力件
多根节点（片段）。Vue 2 模板必须单根，Vue 3 随便写。原理第 3 章讲过：vnode 结构升级后返回值可以是数组。注意 attrs 的落点在多根时不再确定，需要显式声明挂到哪个根上。
Teleport 传送门。把组件渲染到 DOM 树的别处，但逻辑关系保持：
<teleport to="body"> <div class="modal" v-if="open">弹层内容</div> </teleport>
解决的经典问题是弹层嵌套：弹层写在深层组件里，父级的 overflow、z-index、transform 会把它裁掉压住。传送到 body 下，样式与逻辑解耦。相比 Vue 2 时代手动 append 的野路子，Teleport 保持了组件关系——父子通信、生命周期一切照旧。
Suspense 异步编排。等待异步依赖（异步 setup 的组件）就绪前显示兜底：
<suspense> <template #default> <async-detail /> <!-- setup 是 async 的组件 --> </template> <template #fallback> <spinner /> </template> </suspense>
官方文档仍标注为实验特性，生产使用要克制——多数异步等待场景用 defineAsyncComponent 的 loading 参数或路由守卫更稳。
三、迁移：破坏性变更清单
Vue 3 兼容层（官方迁移构建）允许 Vue 2 代码渐进迁移。主要破坏点按踩坑频率排：
| 变更 | Vue 2 | Vue 3 |
|---|---|---|
| 全局 API | new Vue 挂全局 | createApp 返回实例，插件挂在实例上 |
| 实例事件 | on off $once | 移除，总线模式终结 |
| v-model | value/input | modelValue/update前缀，支持多绑定 |
| 过滤器 | {{ price | currency }} |
| 异步组件 | 组件选项工厂函数 | defineAsyncComponent 函数 |
| 指令钩子 | bind/update 五钩子 | mounted/updated 等对齐命名 |
| attrs 与 class 合成 | 外部 class 与 attrs 合并进根 | 行为细化，多根需显式指定 |
迁移路线建议分四步：先升到 Vue 2.7（组合式 API 的最后兼容版，存量代码先习惯新写法）→ 换迁移构建模式跑起来（警告逐条清）→ 清空破坏点切正式版 → 最后处理依赖生态（Vuex 4→Pinia、Vue Router 3→4、组件库升 Vue 3 版）。三到五人的中型工程，一个迭代周期足够。
Vue 3 生态全景
四、收益评估的现实主义
Vue 3 的性能提升对多数应用是"免费变快"，但幅度取决于模板形态：静态内容占比高的页面（营销、内容站）吃到补丁标志与静态提升的大头；近乎全动态的密集表单，收益接近纯 Proxy 响应式的份额。别指望升级本身解决架构性性能问题——第 9 章的手段照旧要做。真正立竿见影的反而是工程面：Vite 的开发体验、TypeScript 的类型安全、组合函数的测试便利，这三项对团队效率的加成通常大于运行时性能。
本节要点回顾
- 三大编译优化：静态提升省 vnode 新建、补丁标志裁剪 diff 范围、事件缓存免重绑，预编译专属；
- 响应式开放：reactive/ref 成为公共 API，Pinia 与组合函数生态的地基；
- 三个新件：多根解约束、Teleport 解弹层层级、Suspense 实验性慎用；
- 迁移四步：升 2.7 → 迁移构建清警告 → 切正式版 → 生态依赖跟进；
- 收益现实：静态占比决定运行时收益，工程效率收益往往更实在。
最后一站：把这些能力落成可持续维护的工程规范——最佳实践。