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>