v-memo 记忆化子树渲染
最后更新：2026-10-22
v-memo 记忆化子树渲染
v-memo 接收依赖数组：数组值不变时跳过整个子树的更新，用于超长列表的性能优化（Vue 3.2+）。
| 分组 | 指令 |
|---|---|
| 类型 | 指令 |
| 作用域 | 模板 |
| Vue 版本 | 3.2+ |
| SSR 支持 | 支持 |
📝 语法
<div v-memo="[valueA, valueB]">...</div>
<li v-for="item in list" :key="item.id" v-memo="[item.selected]">⚙️ 参数
| expression | 依赖值数组；数组元素与上次全等时跳过更新（空数组等于 v-once） |
|---|
返回值：指令，无返回值
▶ 示例
修改下面的代码，在预览区实时查看效果：
输出：
连续点击时数字只在满足依赖变化的那几次更新（演示用，实际用于长列表）。💡 要点
⚠️ 注意 只在性能确有瓶颈时使用：v-memo 依赖必须正确，漏写依赖会造成数据不更新。
ℹ️ 说明 与 v-for 搭配是主要场景：v-memo="[item.selected]" 让未选中项跳过 diff。
💡 提示 v-memo="[]" 等价于 v-once（永不重新渲染）。
🏷️ 相关指令
💡 相关案例
更多案例即将上线。
📚 相关教程
❓ 常见问题
Q 什么时候该用 v-memo？
A 列表渲染出现明显卡顿时（长列表 + 大量静态内容），先用性能分析确认瓶颈再上。
Q 依赖数组写错会怎样？
A 漏写会导致该更新时不更新；写多了只是失去优化意义。
Q 和 v-once 的关系？
A v-memo="[]" 等价 v-once（永不重渲染）；v-memo 的常规用法是带条件跳过。
