Vue Academy · 课时

使用 v-memo 进行模板记忆化

Q: 「使用 v-memo 进行模板记忆化」这节课中我会学到什么？

v-memo 指令、依赖数组、跳过重新渲染的时机，以及与 computed 的比较 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

v-memo 指令、依赖数组、跳过重新渲染的时机，以及与 computed 的比较

使用 v-memo 进行模板记忆化 是 CoddyKit 上的免费 Vue Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

什么是 v-memo

v-memo 会对模板的一部分进行记忆化缓存。Vue 会缓存渲染结果，只有列出的依赖发生变化时才会重新渲染该子树。对于开销大且基本静态的标记，这是一个性能优化手段。

依赖数组

您需要绑定一个依赖数组。只要数组中的每个值都等于之前的值，Vue 就会跳过整个元素及其子节点的更新。

<div v-memo="[dep1, dep2]">
  <!-- skipped unless dep1 or dep2 change -->
</div>

空数组

空数组 v-memo="[]" 表示内容只渲染一次，之后永不更新，相当于只渲染一次静态内容。

<div v-memo="[]">
  <!-- rendered once, never re-rendered -->
</div>

主要使用场景：v-for

v-memo 的主要用途是处理超大型列表。请将它放在 v-for 内部，这样每一行只会在自身相关数据发生变化时重新渲染。

<div
  v-for="item in list"
  :key="item.id"
  v-memo="[item.id === selectedId]"
>
  ...
</div>

记忆化缓存选中行

在经典示例中，数千行只有在自身的选中状态切换时才会重新渲染。比较 item.id === selectedId 意味着一行只有在被选中或取消选中时才会更新。

<tr
  v-for="item in items"
  :key="item.id"
  v-memo="[item.id === selectedId]"
>
  <td :class="{ active: item.id === selectedId }">
    {{ item.name }}
  </td>
</tr>

列出所有响应式依赖

您必须包含子树所依赖的每个响应式值。如果遗漏其中一个值，该值发生变化时元素不会更新，从而产生难以察觉的界面过时问题。

<!-- WRONG: name can change but is not listed -->
<div v-memo="[item.id]">{{ item.name }}</div>

永远不要与 v-if 结合使用

不要以冲突的方式将 v-memo 与 v-if 或 v-for 的结构指令放在同一个元素上。具体来说，不支持在同一元素上同时使用 v-memo 和 v-if，否则会产生未定义行为。

<!-- AVOID -->
<div v-memo="[a]" v-if="show">...</div>

v-memo 与 computed

computed 会缓存从响应式状态派生出的值。v-memo 会缓存渲染后的虚拟节点。它们解决的是不同问题：computed 避免重新计算数据，v-memo 避免重新渲染标记。

何时 computed 就足够了

如果瓶颈在于重新计算数据（筛选、排序或格式化），请先使用 computed，因为它更简单，也更不容易误用。

import { computed } from "vue";

const sorted = computed(() =>
  [...items.value].sort((a, b) => a.rank - b.rank)
);

何时使用 v-memo

只有在性能分析显示大型列表的重新渲染占用了主要时间，并且大多数行在更新之间保持不变时，才应使用 v-memo。

先进行性能测量

v-memo 会增加内存开销和比较成本。对于小型列表，它可能比普通渲染更慢。请务必在使用前后进行性能分析，以确认确实获得了收益。

快速检查

什么时候适合使用 v-memo？

回顾

v-memo="[deps]" 会在所有列出的依赖都未变化时跳过子树的重新渲染，非常适合用于大型 v-for 列表。请列出每个响应式依赖，绝不要在同一元素上将它与 v-if 结合使用；派生值应优先使用 computed，并始终进行性能分析以确认确实获得了性能提升。

常见问题解答

「使用 v-memo 进行模板记忆化」课时是免费的吗？

是的 — 「使用 v-memo 进行模板记忆化」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「使用 v-memo 进行模板记忆化」这节课中我会学到什么？

v-memo 指令、依赖数组、跳过重新渲染的时机，以及与 computed 的比较你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「使用 v-memo 进行模板记忆化」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy