v-memo的核心用途是跳过子树的虚拟DOM diff和patch，仅当依赖数组中所有值严格相等时复用VNode；适用于长列表、静态结构+少量动态绑定的场景，需Vue 3.2+、显式key及稳定响应式依赖。

v-memo 的核心用途不是“分析”性能，而是直接干预渲染过程、跳过不必要的 diff。它不提供分析能力，但能显著改善已识别出的性能瓶颈——尤其是那些依赖稳定、结构固定、更新稀疏的子树。

明确 v-memo 的适用前提

它只在以下情况真正起效：

• 子树内容绝大多数时间不变，但父组件频繁触发重渲染（比如响应式状态全局更新）
• 子树节点数量多、嵌套深，或包含昂贵组件（如自定义表单、图表、富文本）
• 你已经确认该子树的更新仅由少数几个值驱动（例如 user.status、item.id、computedFlag），而非整个对象或数组引用
• Vue 版本 ≥ 3.2（推荐 ≥ 3.4，注意 3.4+ 要求 v-memo 必须与 v-for 搭配使用，否则警告）

正确声明依赖数组

依赖项必须是可被严格相等（===）比较的值，且引用稳定：

• 原始类型（string/number/boolean）直接写入：v-memo="[item.id, item.status]"
• 避免直接传入对象或数组字面量，比如 v-memo="[item]" 或 v-memo="[item.tags]" —— 因为每次渲染都会生成新引用，导致缓存失效
• 若需依赖对象字段，用 computed 或解构提取：v-memo="[item.id, computedDisplayName]"
• 空数组 v-memo="[]" 等效于 v-once，整块子树仅渲染一次，慎用

配合 v-for 的典型用法

这是收益最明显的场景。比如渲染千条用户数据：

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

立即学习“前端免费学习笔记（深入）”；

<div v-for="user in users" :key="user.id" v-memo="[user.status]">
  <p>{{ user.name }}</p>
  <p :class="user.status === 'online' ? 'green' : 'grey'">{{ user.status }}</p>
</div>

当只有某位用户上线/下线时，仅该用户的 div 触发重新渲染；其余 999 个 div 完全跳过 VNode 创建、diff 和 patch 阶段。

验证是否生效的简单方法

不需要复杂工具，靠观察即可判断：

• 打开浏览器开发者工具 → 切换到 “Rendering” 面板 → 勾选 “Paint flashing”，然后触发父组件更新。若 v-memo 生效，被包裹区域不会闪烁（无重绘）
• 在子组件中添加 onUpdated 钩子或 watchEffect(() => console.log('updated'))，观察日志是否大幅减少
• 对比开启/关闭 v-memo 后的 Performance 面板 Flame Chart：重点关注 “Render” 和 “Update DOM” 时间，下降明显即有效