Vue.js 模板中的 v-pre 指令有什么作用？

v-pre 是 Vue.js 中的一个指令，它的主要目的是跳过其所在节点的编译过程。这意味着，任何在带有 v-pre 的元素内的 Vue 语法（如插值、指令等）都将不被解析和编译。

使用场景举例：

1. 性能优化： 当我们在页面上有大量内容，但其中某些部分不需要 Vue 的动态内容时（如静态文本或基本的 HTML），使用 v-pre 可以减少 Vue 编译器的工作量，从而提升整体的渲染性能。

2. 避免冲突： 在使用 Vue.js 的同时，如果页面中还包含其他模板语言（如服务器端模板），可能会导致冲突。比如，两种模板语言都使用 {{}} 作为标记。使用 v-pre 可以防止 Vue 处理这些非 Vue 模板的部分。

实际代码示例：

假设我们有一个 Vue 应用，并且在其中包含了一些不需要 Vue 处理的静态内容，我们可以这样使用 v-pre：

html
<div id="app">
  <h1 v-pre>{{ This will not be compiled by Vue }}</h1>
  <p>{{ message }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello, Vue!'
    }
  })
</script>

在这个例子中，<h1 v-pre>{{ This will not be compiled by Vue }}</h1> 这段代码中的 {{ This will not be compiled by Vue }} 将被直接渲染成文本，而不会被 Vue 解析为表达式。这非常适合用来显示原始的模板代码或预防与其他模板引擎的冲突。