vue——v-pre的使用
🔰 基础理解
✅ 什么是 v-pre？
v-pre 是一个跳过编译的 Vue 指令。
它告诉 Vue：“这个元素和其子元素中的内容不要被编译处理，按原样输出。”
✅ 使用场景：
- 展示原始的 Mustache 插值语法（{{ xxx }}）。
- 模板中写教程或代码示例时。
✅ 示例代码：
<p v-pre>{{ name }}</p>
🚀 页面渲染效果：
{{ name }}
🔍 而不是：变量 name 的值。
🔍 进阶用法
✅ 跳过模板编译器解析
Vue 模板解析过程中，v-pre 会直接略过元素及其所有子节点的指令、插值表达式等编译流程，仅保留原始 HTML。
例如：
<div v-pre><span>{{ hello }}</span><button @click="doSomething">点我</button>
</div>
- 不会把 {{ hello }} 编译为数据绑定。
- @click 也不会生效（事件绑定会失效）。
- 整个 block 是纯 HTML。
✅ 常用场景
| 场景 | 原因 |
|---|---|
| 教程/文档/代码展示 | 不希望 Vue 编译代码中的花括号 |
| 静态说明文字 | 代码块不会绑定数据，不需要解析提升性能 |
| 临时排除某个块的解析 | 排查问题、对比结果 |
✅ 和其他指令配合使用
- v-pre 的优先级最高，会覆盖其他指令
- 即使同节点存在 v-if、v-for，也一律无效
🔁 Vue 2 与 Vue 3 的差异
| 特性 | Vue 2 | Vue 3 |
|---|---|---|
| 语法支持 | ✅ 完整支持 | ✅ 完整支持 |
| 编译跳过机制 | ✅ 编译器在解析时判断并跳过 | ✅ 更高效地在虚拟 DOM 编译器阶段跳过 |
| 编译后静态提升优化 | ❌ 不具备 | ✅ 可配合模板静态提升一起使用 |
| 是否仍需手动使用 | ✅ 对教程等仍然实用 | ✅ 使用频率降低，Vue 3 编译器自动处理更多 |
🧠 总结
| 项目 | 内容说明 |
|---|---|
| 指令名称 | v-pre |
| 基本作用 | 跳过编译，保留 HTML 中原样内容 |
| 适用场景 | 教程代码展示、模板排错、静态段落 |
| 会跳过哪些功能？ | 插值表达式、指令绑定（如 v-if、v-for、@click）等 |
| Vue2 和 Vue3 差异 | Vue 3 在静态分析和性能提升上更强，但语义不变 |
案例
确保已安装 highlight.js：
npm install highlight.js
<template><div class="demo-block"><h2 class="title">Vue 代码示例</h2><!-- 语言切换按钮 --><div class="tabs"><button v-for="lang in languages" :key="lang" :class="{ active: currentLang === lang }" @click="currentLang = lang">{{ lang }}</button></div><!-- 代码展示 --><pre v-pre><code :class="'language-' + currentLang" ref="codeBlock">
{{ codeMap[currentLang] }}
</code></pre><h3>🎯 实际效果：</h3><div class="preview"><p>{{ message }}</p><button @click="sayHi">点我</button></div></div>
</template><script setup>
import { ref, watch, onMounted } from 'vue'
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'const languages = ['html', 'vue', 'js']
const currentLang = ref('vue')const codeMap = {html: `<p>{{ message }}</p>\n<button @click="sayHi">点我</button>`,vue: `<template><p>{{ message }}</p><button @click="sayHi">点我</button>
</template><script setup>
import { ref } from 'vue'
const message = ref('你好，Vue')
function sayHi() {alert('你好！')
}
<\/script>`,js: `import { ref } from 'vue'\nconst message = ref('你好，Vue')\nfunction sayHi() {\n alert('你好！')\n}`
}const message = ref('你好，Vue')
function sayHi() {alert('你好！')
}const codeBlock = ref()const highlight = () => {if (codeBlock.value) {hljs.highlightElement(codeBlock.value)}
}onMounted(highlight)
watch(currentLang, highlight)
</script><style scoped>
.demo-block {padding: 20px;border: 1px solid #ccc;border-radius: 10px;margin: 2em 0;
}
.title {font-size: 20px;margin-bottom: 10px;
}
.tabs {margin-bottom: 10px;
}
.tabs button {margin-right: 8px;padding: 5px 10px;cursor: pointer;border: 1px solid #aaa;background: #f0f0f0;border-radius: 4px;
}
.tabs button.active {background: #007bff;color: white;border-color: #007bff;
}
.preview {margin-top: 1em;padding: 1em;background: #f9f9f9;border-radius: 8px;border: 1px dashed #ccc;
}
pre {background: #f5f5f5;padding: 10px;border-radius: 8px;overflow-x: auto;
}
</style>