在 Vue 项目中，我们经常会听到关于 v-if 和 v-show 的争论：前者决定是否渲染 DOM 节点，后者则是通过 display: none 控制显示与否。看似选择不同，但其实两者解决的问题本质上是一样的——是否需要渲染。

然而，在现代前端应用中，真正的性能瓶颈往往不在“要不要渲染”，而是在“要不要更新”。

Vue3 针对这个痛点，引入了一个全新的指令：v-memo。

---

什么是 v-memo？

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

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

它接收一个依赖数组。只有当依赖项中至少一个值发生变化时，Vue 才会重新渲染该节点及其子节点。否则，将完全跳过 diff 过程。

换句话说，v-memo 可以让 Vue 在不必要的时候“假装没看到这个节点”，直接复用之前的渲染结果。

---

v-memo 的应用场景

v-memo 并不是用来取代 v-if 或 v-show 的，它的定位更加明确：优化渲染性能，尤其适合超大规模的列表渲染。

来看一个例子：假设我们有一个包含 1000 个用户的列表，每个用户有 name 和 status（在线/离线）两个属性。

普通写法

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

如果其中某个用户的 status 发生变化，Vue 在理论上需要遍历整个列表，重新为每个节点创建 VNode 并 diff。这显然存在性能浪费。

---

使用 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 改变时，只有对应的 div 节点会被重新渲染，其余 999 个用户完全跳过 diff 过程。

这样，我们将原本的 O(n) 更新检查，优化为 O(1)。性能提升非常显著。

---

v-memo 与 v-once 的关系

在 Vue3 之前，我们有一个常用的性能优化指令：v-once，它的作用是让节点在首次渲染后不再更新。

其实，v-once 本质上就是 v-memo 的一个特例：

v-once ≡ v-memo="[]"

因为依赖数组为空，所以它永远不会触发更新，渲染结果等同于“冻结”。

---

v-if、v-show 与 v-memo 的区别

• v-if / v-show：解决的是“要不要渲染/展示”的问题。
• v-memo：解决的是“需不需要重新渲染”的问题。

换句话说，前两者关注的是 有无，而 v-memo 则着眼于 多与少。

在真实业务中，页面复杂度和交互越来越高，真正的性能挑战往往来自频繁的 更新 而非首次渲染。

因此，v-memo 是 Vue3 面向现代前端性能优化的一个关键补充。

---

对比表格

下面用一张表格快速对比三者的定位：

指令	关注点	典型场景
v-if	是否渲染	控制 DOM 节点是否存在
v-show	是否展示	控制节点显示/隐藏（CSS display）
v-memo	是否更新	跳过 diff，提高更新性能

---

总结

• v-memo 能够根据依赖数组，条件性地跳过渲染节点及子节点的更新。
• 它的最佳使用场景是 大规模列表渲染，能将更新复杂度从 O(n) 优化到 O(1)。
• v-once 可以看作是 v-memo 的简化版。
• 与 v-if / v-show 的区别在于关注点不同：前者关心“是否渲染”，而 v-memo 关心“是否更新”。

随着 Vue3 的普及，v-memo 将成为前端开发者在性能优化上的新利器，尤其是面对数据量庞大的实时应用。

如果你正在用 Vue3 开发项目，不妨试一试它，或许能帮你轻松解决掉一些“卡顿”问题。 🚀