v-once实现一次性渲染，数据变化不更新；v-pre完全跳过编译，原样输出HTML。二者均不参与响应式系统，适用于静态内容以提升性能，但不可滥用在需响应式更新的场景。
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'：
-
<h1 v-once>{{ title }}</h1>→ 始终显示 “Hello”，不随title改变 -
<pre v-pre><span>{{ title }}</span></pre>→ 页面显示文字：<span>{{ title }}</span>，不解析也不替换
