v-once是Vue中让元素或组件仅渲染一次、跳过后续响应式更新的性能优化指令；适用于初始化后永不变化的静态内容，如版权信息、固定文案、不可变字段等，但不可用于需响应式更新的区域。

v-once 是 Vue 中一个轻量但高效的指令，它让模板中某一部分只渲染一次，之后完全跳过响应式追踪和后续更新。对静态内容特别有用——既减少内存占用，又加快 diff 和 patch 过程。

哪些内容适合加 v-once？

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

• 纯静态 HTML 片段，比如 <h2>关于我们</h2><p>成立于2015年……</p>
• 服务端注入的初始文案，如通过 window.__INITIAL_DATA__ 渲染的介绍文字
• 第三方嵌入容器，例如统计脚本占位 <div id="analytics-placeholder"></div>
• 列表中明确不可变的字段，如文章列表里的 {{ item.categoryName }}（前提是 categoryName 在整个生命周期内不变）

v-once 与 v-if / v-show 的本质区别

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

vue-component-analyzer

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

下载

• 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 内容会被提前提升为常量，运行时零遍历