Vue Academy · 课时

记忆化技术

Q: 「记忆化技术」这节课中我会学到什么？

使用记忆化避免重复计算 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用记忆化避免重复计算

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

减少工作量

性能优化通常来自不重新计算或重新渲染没有发生变化的内容。Vue 提供了多种记忆化工具，可以缓存结果并跳过不必要的更新。

计算属性缓存

计算属性会缓存结果，只有当某个响应式依赖发生变化时才会重新计算。因此，它的开销远低于每次渲染都会运行的方法。

computed: {
  expensiveTotal() {
    return this.items.reduce((sum, i) => sum + i.price, 0)
  }
}

计算属性与方法

每当模板重新渲染时，方法都会运行，即使其输入完全相同。计算属性会复用缓存值，因此对于模板中使用的派生数据，请优先使用计算属性。

// method: runs on EVERY render
methods: { total() { /* ... */ } }

// computed: cached until items change
computed: { total() { /* ... */ } }

静态内容的 v-once

v-once 指令只渲染元素一次，之后的所有更新都会跳过该元素。请将它用于永不变化的内容。

<template>
  <h1 v-once>{{ appTitle }}</h1>
</template>

何时使用 v-once

请将 v-once 应用于页脚、条款文本或固定页眉等大型静态区域。Vue 会将渲染结果视为静态内容，之后永远不会再次进行差异比较。

<footer v-once>
  <p>Copyright 2024. All rights reserved.</p>
</footer>

高开销列表的 v-memo

v-memo 指令会对一个子树进行记忆化，只有其依赖数组中的值发生变化时才会重新渲染。它特别适合大型列表。

<div v-for="item in list" :key="item.id" v-memo="[item.selected]">
  {{ item.name }} - {{ item.selected }}
</div>

v-memo 的工作方式

只有当某个项目的记忆化数组发生变化时，该项目才会重新渲染。如果 item.selected 保持不变，Vue 就会完全跳过该行的重新渲染，即使父组件发生了更新也是如此。

避免不必要的重新渲染

组件会在其响应式数据或属性发生变化时重新渲染。请让组件保持小巧并各司其职，这样一个区域的变化就不会迫使无关部分重新渲染。

列表中的稳定键

请始终为 v-for 提供稳定且唯一的 :key。使用数组索引作为键可能会导致 Vue 复用错误的 DOM 节点，并进行超出必要范围的重新渲染。

<!-- prefer a stable id -->
<li v-for="user in users" :key="user.id">{{ user.name }}</li>

精简响应式数据

只有当模板依赖某项数据时，才应将其放入响应式状态。大型对象或界面中永不变化的值会增加响应式跟踪的开销。在适当情况下，请使用普通的非响应式变量。

import { shallowRef } from "vue"

// shallowRef avoids deep reactivity on large objects
const bigConfig = shallowRef(loadConfig())

记忆化纯函数

对于 Vue 响应式系统之外的纯 JavaScript 计算，您可以将结果缓存到一个简单的映射中，这样使用相同输入的重复调用就能立即返回。

const cache = new Map()
function fib(n) {
  if (n < 2) return n
  if (cache.has(n)) return cache.get(n)
  const result = fib(n - 1) + fib(n - 2)
  cache.set(n, result)
  return result
}

快速检查

检验您对记忆化的掌握情况。

回顾

使用缓存减少浪费的工作：计算属性会记忆化派生值，v-once 只渲染静态内容一次，而 v-memo 会跳过大型列表中子树的重新渲染。请使用稳定的键，并尽量精简响应式状态。接下来，您将学习如何使用实际工具查找并修复性能瓶颈。

常见问题解答

「记忆化技术」课时是免费的吗？

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

「记忆化技术」这节课中我会学到什么？

使用记忆化避免重复计算你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

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

「记忆化技术」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Vue Academy