v-once用于完全不变的静态内容，首次渲染后跳过响应式追踪和DOM对比；v-pre用于跳过模板编译，原样插入HTML或避免Vue解析。
静态内容渲染的关键是让 Vue 跳过响应式追踪和虚拟 DOM 对比，直接复用首次渲染结果。这能显著减少重渲染开销，尤其在频繁更新的组件中效果明显。
v-once：标记完全不变的内容
适用于版权信息、协议标题、固定文案等真正不会变化的节点。它让 Vue 在首次渲染后把整个元素树转为静态节点，后续所有更新都跳过这部分的依赖收集、diff 和 patch。
- 只写一次，永远不更新 —— 如果内容后期需要动态修改，不能靠 v-once 实现，得换用 v-if 控制显隐或移除指令
- 可包裹整个组件根元素，也能作用于单个标签，比如
<h1 v-once>{{ title }}</h1> - 在 Vue 3 中，被 v-once 包裹的静态内容会被编译成模块级常量，运行时零计算开销
v-pre：跳过模板编译
当你有一段纯 HTML 或带双大括号但不想被 Vue 解析的文本时，v-pre 是更轻量的选择。它不参与响应式系统，也不生成 VNode，只是原样插入 DOM。
- 适合展示代码示例、Markdown 片段、或第三方模板语法（如 Handlebars 占位符）
- 注意它不支持插值表达式，
{{ message }}在 v-pre 区域里会原样显示为字符串 - 性能开销比 v-once 更低，但适用范围窄，仅用于“不归 Vue 管”的内容
结合场景选对指令
不是所有“看起来静态”的内容都该用 v-once。判断标准只有一个：这个内容在组件整个生命周期里，是否真的不会因任何响应式数据变化而改变。
立即学习“前端免费学习笔记（深入）”；
- 用户协议页的标题和正文 —— 适合 v-once
- 带用户昵称的欢迎语
欢迎，{{ user.name }}！—— 不适合 v-once，因为 user.name 是响应式的 - 文档中展示的
<div v-model="input">示例代码 —— 适合 v-pre
避免误用带来的维护风险
v-once 是性能利器，但也是隐藏的“更新陷阱”。一旦加了，就等于告诉 Vue：“这部分你别管了”，后续逻辑变更容易被忽略。
- 团队协作时建议加注释说明，比如
<!-- v-once: 协议文本永不更新 --> - 配合 ESLint 规则或 Code Review 流程，防止在本该响应式的地方误加 v-once
- 大型项目中可封装一个
<StaticText>组件，内部统一使用 v-once，并提供 props 校验机制
