v-once 指令使模板内容仅渲染一次且跳过响应式追踪，适用于永远不变的静态内容，如固定标题、版权信息、不可变列表字段等，能显著降低 patch 时间并提升 hydration 性能。

v-once 是 Vue 中一个轻量但高效的指令，它让模板中某一部分只渲染一次，之后完全跳过响应式追踪和后续更新。对静态内容（如标题、说明文字、版权信息、固定 banner）特别有用——既减少内存占用，又加快 diff 和 patch 过程。

哪些内容适合加 v-once？

核心判断标准：内容初始化后 永远不会变化，也不依赖任何响应式数据。

• 纯静态 HTML 片段（如 `

  关于我们

  成立于2015年……

  `）
• 服务端注入的初始数据（如 `window.__INITIAL_DATA__` 渲染的介绍文案）
• 第三方嵌入代码的容器（如统计脚本占位 div，本身不参与响应式）
• 大量列表中明确不可变的字段（如文章列表里的固定分类标签：<span v-once>{{ item.categoryName }}</span>，前提是 categoryName 在整个生命周期内不变）

和 v-if / v-show 的本质区别

v-once 不是条件渲染，它不控制显隐，也不销毁重建。它只是“渲染一次，从此静音”：

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

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

• v-if：条件为假时节点被销毁，为真时重新创建 —— 有开销，适合频繁切换且内容差异大的场景
• v-show：始终渲染，靠 CSS 切换 display —— 无重建成本，但 DOM 始终存在
• v-once：仅首次渲染，之后 Vue 完全忽略该节点及其子树 —— 零更新开销，DOM 永久保留

实际使用注意事项

用错地方反而引发问题，需避开几个典型陷阱：

• 不要在包含子组件或动态插槽的地方滥用：v-once 会禁用子组件的响应式更新，即使子组件内部是响应式的
• 避免包裹计算属性或 watch 依赖项：一旦父级响应式状态变更，v-once 区域不会同步刷新 —— 这不是 bug，是设计使然
• 可与 v-html 组合使用加速富文本展示：<div v-once v-html="staticHtml"></div>（确保 staticHtml 确实静态）
• 在 SSR 场景下，v-once 渲染的内容在客户端首屏 hydrate 时不会比对，提升 hydration 性能

性能提升真的明显吗？

单个 v-once 几乎感知不到，但在以下场景效果突出：

• 长列表（100+ 项）中，每项含多个静态字段（如 ID、发布时间、作者名），批量加 v-once 可降低 20%~40% 的 patch 时间
• 首页大段介绍文案 + 图标 + 固定按钮组合，用 v-once 包裹后，Vue Devtools 的“更新”面板里将彻底消失这些节点
• 配合 Vue 3 的编译器优化（如 hoistStatic），v-once 内容会被提前提升为常量，运行时零遍历

不复杂但容易忽略。静态即静态，交给 v-once，Vue 就少操一份心。