v-once 和 v-memo 均用于减少后续更新的 diff 开销：v-once 冻结真正不变的内容，编译期提升为常量 vnode，跳过依赖收集、diff 和 DOM 操作；v-memo 依据依赖数组浅比较决定子树复用，保留响应式追踪。

v-once 和 v-memo 是 Vue 3 中专为减少不必要重渲染而设计的两个轻量指令，它们不提升首次渲染速度，但能显著降低后续更新时的 diff 开销。关键在于：v-once 用于真正不变的内容，v-memo 用于“大部分稳定、局部可能变”的子树。

v-once：静态内容的一次性冻结

它不是缓存，而是编译期标记。Vue 会把带 v-once 的节点提升为模块级常量 vnode，后续所有更新周期中完全跳过：

• 响应式依赖收集（不追踪数据变化）
• 虚拟节点 diff 对比（不进入 patch 流程）
• 真实 DOM 操作（不调用 insert/remove/setAttribute）

适合页脚版权、协议文本、固定导航栏、图标组件、文章发布日期等确定后永不变更的内容。注意：加了 v-once 后，哪怕绑定的数据变了，视图也不会更新——所以不能用于需要响应式反馈的字段，比如用户输入后的实时校验提示。

v-memo：按依赖数组控制子树复用

v-memo 是运行时决策，靠传入的数组做浅比较来决定是否跳过整个子树的更新。每次更新前，Vue 会对比当前数组和上一次缓存的值：

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

Json Schema Toolkit

使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。

下载

• 全部相等 → 复用旧 vnode，跳过子树 diff 和 patch
• 任一不等 → 正常重新渲染，并更新缓存数组

它不阻止响应式追踪，子组件内部仍可正常响应变化，只控制“这一段结构要不要重算”。典型场景包括列表项（v-memo="[item.id, item.status]"）、表格行、行情卡片、表单中部分只随 ID 变化的静态字段区域。

常见误用与避坑点

v-once 和 v-memo 语义不同，不能混用在同一元素上。另外要注意：

• v-memo 必须传入固定长度、语义明确的数组，推荐用 item.id 而非 item（对象引用每次都不等）
• 避免用 undefined、函数返回值或嵌套对象作为 v-memo 依赖项，否则浅比较失效
• v-once 不影响事件监听（@click 仍可用），也不阻止插槽内容更新（除非插槽本身也加了 v-once）
• v-memo="[]" 功能上等价于 v-once，但表达的是“无依赖需检查”，而非“永不变”，语义更弱，慎用

配合布局优化的实际写法

在页面级结构中，可将静态区域直接用 v-once 包裹：

<header v-once>
  <MainNav />
  <Breadcrumb />
</header>
<main>
  <!-- 动态内容区域 -->
</main>
<footer v-once>
  <SiteFooter />
</footer>

对 v-for 渲染的列表项，优先考虑 v-memo：

<div v-for="item in list" :key="item.id" v-memo="[item.id, item.status]">
  <h3>{{ item.title }}</h3>
  <p>状态：{{ item.status }}</p>
</div>

这样既保留了响应能力，又避免了 status 不变时整行重复 diff。