Vue.js 中的 `v-once` 和 `v-pre` 是两个精巧却极具性能价值的指令：前者实现内容的一次性渲染，数据变更后彻底跳过更新，适合注册时间、版本号等只读静态信息；后者则完全绕过 Vue 编译流程，原样输出 HTML 或模板字面量，常用于教程示例、Markdown 渲染或嵌入第三方静态片段。二者均不参与响应式系统，能显著降低依赖追踪与 DOM 重绘开销，尤其在首屏静态区块（如页脚、法律声明）中效果突出，但需谨慎避免误用于需动态响应的场景——用对地方，它们就是提升渲染效率的“静默加速器”。

Vue.js 的 v-once 和 v-pre 是两个轻量但高效的指令，专为优化静态或非响应式内容的渲染性能而设计。它们不参与响应式系统，能显著减少 Vue 的依赖追踪与 DOM 更新开销，尤其适合文档说明、版权信息、第三方 HTML 片段等场景。

v-once：一次性渲染，跳过后续更新

使用 v-once 的元素或组件只会被渲染一次，之后无论其绑定的数据如何变化，Vue 都不再重新计算或更新该节点及其子树。

• 适用于内容确定后永不变更的区域，比如用户头像旁的“注册时间”（只读展示）、文章发布日期、版本号等
• 可作用于普通元素、组件、v-for 列表项，甚至整个组件根节点（在组件定义中设置 inheritAttrs: false 并配合 v-once 可进一步精简）
• 注意：v-once 不影响事件监听（@click 仍可用），也不阻止插槽内容更新（除非插槽本身也加了 v-once）

v-pre：完全跳过编译，原样输出

v-pre 告诉 Vue 忽略当前元素及其所有子节点——不解析指令、不处理插值、不启用响应式绑定，直接将模板作为纯 HTML 渲染。

• 适合展示 Vue 模板语法示例（如教程页面中显示 {{ message }} 字面量）、嵌入未经过滤的 Markdown HTML 输出、或集成遗留静态 HTML 片段
• 常与 v-html 配合使用：先用 v-pre 阻止编译，再用 v-html 安全插入已处理的 HTML 字符串
• 不能与 v-if、v-for 等指令共存于同一元素——Vue 会忽略其他指令，仅执行 v-pre

组合使用场景与注意事项

当页面中存在大量静态区块（如页脚版权、法律声明、帮助文档段落），可结合两者提升首屏性能与运行时稳定性：

• 对纯文本静态块，优先用 v-once；对含原始 HTML 标签或需保留双大括号字面量的内容，用 v-pre
• 避免滥用：若某区域实际需要响应式更新（哪怕概率低），不应加 v-once，否则逻辑可能“卡死”
• 服务端渲染（SSR）中，v-once 节点在客户端激活时不会重建，有助于减少 hydration 差异；v-pre 则从服务端到客户端全程跳过 Vue 处理，更轻量

简单对比示意

假设 data 中有 title: 'Hello' 且后续会改为 'Hi'：

• {{ title }}

  → 始终显示 “Hello”，不随 title 改变

• <span>{{ title }}</span>

  → 页面显示文字：{{ title }}，不解析也不替换

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《v-once和v-pre提升渲染性能技巧》文章吧，也可关注golang学习网公众号了解相关技术文章。