vue 3性能提升关键在于“可预测性→可跳过性”：静态提升使静态节点编译期提取复用；patchflag精准标记动态部分跳过全量diff；懒加载+suspense+keepalive实现按需加载与lru缓存；shallowref、markraw等收窄响应式粒度。
Vue 3 的“基于组件的优化”不是泛泛而谈的架构改进，而是从编译、响应式、渲染到加载全流程协同设计的结果。它的性能提升之所以明显，关键在于把“可预测性”转化为“可跳过性”——即在运行前就识别出哪些内容不会变、哪些更新只影响局部，从而大幅削减无效计算。
静态提升（Static Hoisting）
模板中完全不依赖响应式数据的节点，在编译阶段就被提取到 setup 函数外部，只创建一次。比如：
<template><header><h1>我的应用</h1></header><main>{{ message }}</main></template>
Vue 3 编译后，<header></header>及其子节点会被提升为常量 VNode，后续任何 message 更新都不会触发这部分的重建或 Diff。Vue 2 则每次更新都需重新生成整个 VNode 树，哪怕 header 一成不变。
PatchFlag 精准标记动态部分
编译器自动为每个含动态绑定的元素打上位掩码标识，例如：
-
PatchFlags.TEXT（值为 1）→ 只有文本内容会变 -
PatchFlags.CLASS（值为 2）→ 只有 class 属性会变 -
PatchFlags.TEXT | PatchFlags.CLASS（值为 3）→ 文本和 class 都可能变
运行时 patch 过程直接读取该 flag，跳过所有静态属性比对。对比 Vue 2 全量 Diff，Vue 3 在更新一个 <p :class="cls">{{ msg }}</p> 时，只检查 cls 和 msg 两个值，其余 DOM 属性（如 id、style）连遍历都不走。
组件级懒加载与 Suspense 协同defineAsyncComponent + <suspense></suspense> 构成轻量级异步调度单元：
- 组件代码延迟到首次挂载才加载，首屏 JS 包体积下降显著
-
<suspense></suspense>提供统一 fallback，避免白屏或卡顿，且不阻塞父组件渲染 - 加载完成后的组件实例可被
<keepalive></keepalive>接续缓存，形成“加载 → 渲染 → 复用”闭环
这种优化不是孤立功能，而是和 max + LRU 缓存策略联动：当缓存满时，<keepalive></keepalive> 自动淘汰最久未访问的组件实例，既保性能又防内存泄漏。
响应式粒度收窄与显式控制
-
shallowRef/shallowReactive避免对大型嵌套对象做深层 Proxy 代理 -
markRaw明确排除第三方库实例（如 ECharts 实例、Canvas 上下文），防止无谓的响应式包装 -
computed支持lazy: true和deep: false，按需启用计算与监听
这些能力让开发者能主动收敛响应式边界，而不是被动承受框架默认的“全量追踪”。
本质上，Vue 3 的组件优化是一套“编译知情、运行可控、加载按需”的组合策略。它不靠牺牲开发体验换性能，而是通过更智能的预处理和更透明的控制权，把性能红利真正交到开发者手上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
