🔰 基礎理解

? 什么是 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>