Vue 3 新指令 v-memo：终极渲染性能优化神器

在 Vue 中，v-if 和 v-show 一直是控制元素显示的常用手段，但它们只解决了“是否渲染”的问题。真正的性能瓶颈往往在于“是否需要重新渲染”，而这才是现代前端应用中的核心挑战。

为此，Vue 3 引入了一个强大的新指令 —— v-memo，专门用于跳过不必要的更新。

什么是 v-memo？

v-memo 的作用是有条件地跳过某个元素或组件的更新，语法如下：

<div v-memo="[depA, depB]">
  ...
</div>

• 依赖数组 [depA, depB]：只有当其中至少一个值发生变化时，Vue 才会重新渲染这个元素及其子节点。
• 如果依赖值未发生变化，则直接跳过 diff 过程，避免无谓的性能消耗。

为什么需要 v-memo？

v-if 和 v-show 关注的是“有或无”，但在大型应用中，更多的性能问题来自频繁的更新检查，尤其是长列表场景。

举个例子：

未使用 v-memo 的列表

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

当其中某个用户的 status 变化时，Vue 需要遍历整个列表、创建新的 VNode 并 diff，即便其他 999 项完全没变。

使用 v-memo 的优化版

<template>
  <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>
</template>

这里的关键在于：v-memo="[user.status]"

• 当用户的 status 改变时，只有对应的那一项重新渲染。
• 其余 999 项直接跳过 diff，渲染开销从 O(n) 降到 O(1)。

v-memo vs v-once

v-once 实际上是 v-memo 的一个特例：

<div v-once>...</div>

等价于：

<div v-memo="[]">...</div>

因为依赖数组为空，所以它永远不会重新渲染，组件会被永久“冻结”。

总结

• v-if / v-show：控制“渲染与否”。
• v-once：渲染一次后不再更新。
• v-memo：根据依赖变化，跳过不必要的更新，特别适合超长列表优化。

一句话概括：
v-memo 不是替代 v-if/v-show，而是 Vue 3 针对渲染性能的新武器。

✅ 最佳实践：当你遇到列表性能瓶颈时，优先考虑 v-memo。