v-memo 是 Vue 3.2+ 的轻量级运行时优化指令，用于依赖未变时复用 VNode 跳过 diff 和 patch；适用于长列表、仪表盘局部区域、插槽静态部分及独立表单区块，需正确选择基础类型依赖并配合显式 key 使用。
v-memo 是 Vue 3.2+ 提供的轻量级运行时优化指令，专为减少不必要的子树重渲染而设计。它不改变响应式逻辑，也不阻止父组件更新，只在虚拟 DOM 更新阶段“按需跳过”——当依赖数组中所有值都未变化时，直接复用上一次的 VNode，跳过 diff、patch 和节点重建。
什么时候该用 v-memo
它不是默认选项，而是针对可测量瓶颈的精准干预。典型适用场景包括：
- 长列表（如超过 200 行的表格、消息流、商品卡片），尤其当父组件频繁更新但多数列表项实际不变时
- 仪表盘或实时数据看板中，局部区域依赖稳定字段（如 id、status、updatedAt）
- 插槽内容里存在静态或低频变动部分，例如头像+用户名组合、固定标签组
- 复杂表单中相对独立的字段区块（如地址模块、联系人信息块），其更新不依赖全局状态
怎么写才有效
关键不在加指令，而在选对依赖和控住粒度。常见有效写法：
- 依赖项必须是基础类型或稳定引用：优先用 item.id、item.status，避免 item（对象引用每次 diff 都不等）或 item.name.toUpperCase()（每次计算结果不同）
- 数组长度固定且语义清晰：v-memo="[id, status]" 比 v-memo="[id + status]" 更可靠，也比 v-memo="[item]" 更安全
- 与 v-for 配合时，:key 必须显式声明，且 key 值建议与 v-memo 依赖一致（如都用 item.id），否则 Vue 3.4+ 会警告并失效
- 嵌套结构分层加：外层容器锁 schemaVersion，中间区块按数据源切分依赖，内层原子组件配合 shallowRef 减少比对开销
别和 v-once 搞混
v-memo 不是“只渲染一次”，而是“依赖不变就不重算”。二者定位不同：
立即学习“前端免费学习笔记（深入）”；
- v-once 是编译期冻结，适合页脚版权、固定标题、协议文本等整个生命周期都不变的内容；加了就彻底不响应后续任何数据变化
- v-memo 是运行时条件记忆，适合“大部分时间稳定、少数时候要更新”的区域；它保留子组件内部响应性，只是外层控制是否重绘整块结构
- v-memo="[]" 功能等价于 v-once，但语义是“无依赖需检查”，不是“永不变”，两者不可混用在同一元素上
验证有没有真起效
不用复杂工具也能快速判断：
- 打开 Chrome DevTools → Rendering → 勾选 “Paint flashing”，触发父组件更新，v-memo 区域不应闪红
- 在组件 setup 中加 console.log('rendering')，观察该日志是否在非必要时机执行
- 对比 Timeline 中 “Render” 阶段耗时：同操作下应下降 30% 以上（大型表格实测常达 50%+）
- 注意：它只优化后续更新，不影响首次渲染速度
