v-once 是编译期静态冻结，v-memo 是运行时条件记忆化；前者永久跳过响应式追踪与 diff，后者依依赖数组浅比较决定子树是否复用。

v-once 和 v-memo 是 Vue 3 中两个轻量但高效的渲染优化指令，它们不改变业务逻辑，只在虚拟 DOM 更新阶段“踩刹车”，让不需要重绘的部分彻底跳过 diff 和 patch。

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

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

• 响应式依赖收集（不触发 effect）
• 虚拟节点 diff 对比（不进入 patchElement）
• 真实 DOM 操作（不调用 insert/remove/setAttribute）

适合页脚版权、协议文本、固定导航栏、图标组件等真正永不变化的内容。注意：一旦加了 v-once，后续数据再变也不会更新显示，所以不能用于需要动态响应的字段。

v-memo：带条件的子树记忆化

v-memo 是运行时决策，靠依赖数组控制是否跳过子树更新。每次更新前，Vue 会浅比较传入的数组（如 v-memo="[id, status]"）与上一次缓存的值：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

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

它不阻止响应式追踪，子组件内部仍可正常响应变化，只控制“这一段结构要不要重算”。特别适合列表项、表格行、实时行情卡片等局部稳定、整体高频更新的场景。

关键区别与使用提醒

v-once 是“拍快照”，v-memo 是“看条件”。两者语义不同，不能混用在同一元素上：

• v-memo="[]" 功能上等价于 v-once，但表达的是“无依赖需检查”，而非“永不变”
• v-once 不接受参数；v-memo 必须传入固定长度、语义明确的数组（比如用 item.id 而非 item）
• 避免用对象引用、undefined 或函数返回值作为 v-memo 依赖项，否则浅比较失效
• 二者都不影响首次渲染速度，只减少后续更新开销

它们不是万能药，但用对地方，能让高频率更新的页面保持丝滑。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！