v-memo 是 Vue 3.2+ 针对长列表优化的实验性指令，通过显式声明不变依赖跳过子树 diff；仅当 v-memo 数组中所有响应式值未变时复用 vnode，需谨慎选键、避免嵌套与非响应式值。
v-memo 是 Vue 3.2+ 引入的实验性指令，专为优化长列表渲染性能而设计。它不是通用缓存方案，而是针对“静态子树 + 少量动态绑定”的场景做精准记忆，避免虚拟 DOM 的重复比对和重建，在滚动频繁、数据量大的列表中能显著减少 patch 开销。
v-memo 的核心作用：跳过整块子树的 diff
传统 v-for 渲染中，即使某项数据未变，只要父级响应式依赖更新（比如搜索过滤、排序切换、全局 loading 状态变化），Vue 仍会对每一项执行完整的 diff 流程。v-memo 通过显式声明“哪些值没变，这块就别动”，让 Vue 直接复用上次生成的 vnode 子树。
它接收一个数组参数，如 v-memo="[item.id, item.status]"，只有当数组中所有值与上一次完全相等时，才跳过该节点及其子树的更新。
- 数组元素必须是响应式数据（ref、reactive 属性等），不能是函数或 undefined
- 数组长度固定，顺序敏感；[a,b] 和 [b,a] 被视为不同键
- 若数组中任一值变化，整个 memo 块重新渲染，不支持部分更新
在长列表中正确使用 v-memo 的典型模式
适用于列表项结构稳定、仅局部字段更新的场景，例如消息列表、商品卡片、任务项等。
立即学习“前端免费学习笔记（深入）”；
常见写法：
<div v-for="item in list" :key="item.id">
<div v-memo="[item.id, item.isRead, item.lastUpdated]">
<h3>{{ item.title }}</h3>
<p>{{ item.content }}</p>
<span class="status" :class="{ unread: !item.isRead }">
{{ item.isRead ? '已读' : '未读' }}
</span>
</div>
</div>
- 把
:key保留在外层 v-for，确保列表重排逻辑正常 - v-memo 放在最内层稳定容器上，包裹所有不随外部状态变动的子节点
- 只列入真正影响该区块渲染结果的字段，避免误加全局状态（如
user.theme）导致缓存失效
与 v-once、computed 缓存的区别
v-memo 不是“渲染一次就不管了”，而是“按需重用”；它比 v-once 更灵活，比手动 computed 拆分更轻量。
- v-once：只渲染一次，后续任何数据变化都不响应 —— 不适合动态列表
- computed + v-for：可预处理，但无法阻止子组件内部响应式更新触发的重渲染
- v-memo：保留响应性，仅在 memo 键未变时跳过 vnode 创建与 diff，子组件 props 变化仍可响应
注意事项与避坑点
v-memo 是性能利器，但滥用反而降低可维护性甚至引发 bug。
- 不要嵌套使用 v-memo，Vue 不支持也不必要
- 避免 memo 键中包含非响应式值（如 Math.random()、Date.now()），会导致永远不命中缓存
- 当列表项含子组件且子组件自身有复杂响应式逻辑时，需确认其 props 是否已包含在 memo 键中
- 开发阶段建议配合 Vue Devtools 查看“Reactivity”面板，验证 memo 是否生效（vnode 复用时会显示 “skipped”）
