v-pre 是编译时跳过 Vue 处理的指令，不解析、不建 AST、不生成响应式逻辑，适用于纯静态内容如版权信息、代码示例、已渲染 HTML 等；必须独立使用，不可与 v-if、@click 等共存；区别于 v-once（运行时跳过更新），性能提升体现在编译耗时降低 15%–30% 及内存优化。
v-pre 不是“加速编译”，而是让 Vue 在编译阶段彻底跳过某段内容——不解析、不建 AST、不生成响应式逻辑，直接原样输出 HTML。它适合真正静态、无需任何 Vue 处理的片段，用对了能省掉整套编译开销。
哪些内容该加 v-pre？
核心判断标准：这段内容是否完全不需要读取 data、不响应变化、不触发任何指令。
- 纯文本类内容：版权信息、法律条款、文档说明、固定提示语
- 代码示例展示：比如教程中要显示
{{ user.name }}，而不是渲染它的值 - 已处理好的 HTML 字符串：如 Markdown 渲染器输出的 HTML、后端直出的富文本
- 第三方静态嵌入：SVG 内联图标、统计脚本占位容器、无交互的广告位
怎么写才有效？
v-pre 必须独立使用，不能和结构指令或绑定指令共存。它作用于整个元素及其所有子节点。
Json Schema Toolkit
下载
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
- ✅ 正确：
<div v-pre><p>{{ title }}</p><span>v-for 不会生效</span></div>→ 全部当文本输出 - ❌ 错误：
<div v-pre v-if="show"></div>→v-if被忽略，条件逻辑失效 - ❌ 错误：
<button v-pre @click="do">点我</button>→ 点击事件根本不会注册 - ⚠️ 注意：v-pre 不接收参数，
v-pre="xxx"是无效写法，会被 Vue 忽略
v-pre 和 v-once 有什么区别？
两者都面向静态场景，但作用时机和能力完全不同。
立即学习“前端免费学习笔记（深入）”；
- v-pre：编译时跳过。不生成 AST、不追踪响应式、不创建 vnode，最轻量，仅适用于纯展示、无数据依赖的内容
- v-once：运行时跳过更新。首次仍走完整流程（解析、响应式绑定、渲染），之后不再 diff 或重渲染，适合含简单绑定但后续不变的数据（如用户注册时间）
- 组合建议：页脚用 v-pre（纯文本），用户卡片里的「创建时间」用 v-once（需读取 data，但不随状态变）
性能收益到底有多大？
单个 v-pre 几乎没影响，但在大量静态内容场景下效果明显：
- 编译耗时可下降 15%–30%，尤其在组件 API 手册、技术博客等文档类页面中
- 减少不必要的依赖收集，降低首次挂载时的内存占用和 GC 压力
- SSR 场景下，服务端输出更干净，客户端 hydration 差异更小
- 它不提升运行时 diff 性能，也不影响其他区域的编译速度，只专注“少干点活”
