vue——v-pre的使用

🔰 基础理解

✅ 什么是 v-pre？

v-pre 是一个跳过编译的 Vue 指令。

它告诉 Vue："这个元素和其子元素中的内容不要被编译处理，按原样输出。"

✅ 使用场景：

展示原始的 Mustache 插值语法（{{ xxx }}）。
模板中写教程或代码示例时。

✅ 示例代码：

html 复制代码

<p v-pre>{{ name }}</p>

🚀 页面渲染效果：

html 复制代码

{{ name }}

🔍 而不是：变量 name 的值。

🔍 进阶用法

✅ 跳过模板编译器解析

Vue 模板解析过程中，v-pre 会直接略过元素及其所有子节点的指令、插值表达式等编译流程，仅保留原始 HTML。

例如：

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：

bash 复制代码

npm install highlight.js

html 复制代码

<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>