v-pre 是 vue 3 中跳过模板编译的指令，用于原样输出含插值、指令的静态内容，常见于文档示例、性能敏感场景及服务端预渲染；需直接作用于元素，不可与 v-once 等混用，不支持动态参数。
v-pre 是 Vue 3 中的一个内置指令，用于跳过当前元素及其所有子节点的编译过程，让 Vue 直接将模板内容作为纯文本渲染到页面上，不解析插值表达式（{{ }}）、指令（如 v-if、v-for）或组件语法。
什么时候需要用 v-pre
常见于以下场景：
- 展示 Vue 模板语法本身的示例代码（比如文档、教程页）
- 避免对含双大括号的静态文本做无意义的编译（极少数性能敏感且明确无需响应式的场景）
- 在预渲染或服务端输出中临时禁用 Vue 解析（需配合服务端逻辑）
基本用法：直接加在任意元素上
只需在标签上添加 v-pre 属性（无需值），Vue 就会跳过该节点及其全部后代：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
<div v-pre>
这里不会被编译：{{ message }}，v-for 指令也不会生效
<span v-if="false">这行 HTML 也会原样输出</span>
</div>
渲染结果为纯文本（不含任何响应式行为）：
<div>
这里不会被编译：{{ message }}，v-for 指令也不会生效
<span v-if="false">这行 HTML 也会原样输出</span>
</div>
注意点和限制
-
v-pre必须写在元素上，不能写在组件根节点外（比如不能写在<template></template>标签上） - 它不会阻止 JavaScript 执行，仅跳过模板编译；若元素内有内联事件处理器（如
@click="..."），这些绑定仍会被忽略（因为没被编译） - 不能与
v-once或其他指令混用在同一元素上（Vue 会警告，但以v-pre为准） - 不支持动态参数或修饰符，写成
v-pre:xxx或v-pre.stop无效
替代方案对比
如果只是想显示双大括号而不执行插值，还有更轻量的方式：
- 用转义：写成
{{ message }}（即{{ message }}的 HTML 实体） - 用
<code>+v-text或纯文本属性：<code v-text="'{{ message }}'"> - 但当整块结构含多个指令、嵌套标签时，
v-pre是最简洁可靠的方案
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
