面试题：Vue 的 v-cloak 和 v-pre 指令有什么作用？

v-cloak 和 v-pre 是 Vue.js 中两个用于优化渲染过程和用户体验的编译阶段指令。它们的作用各不相同，但都与 Vue 的编译和渲染机制有关。

1. `v-cloak` 指令

作用

v-cloak 指令用于解决页面加载时的“闪烁问题”（Flash of Uncompiled Content, FOUC）。

问题场景：
- 当 Vue 应用加载时，如果网络较慢或 JavaScript 执行有延迟，用户可能会先看到未被 Vue 编译的原始模板代码（例如 {{ message }}），然后才看到编译后的实际内容。
- 这种短暂的“裸露”模板会让用户体验变差。
解决方案：
- v-cloak 通过 CSS 隐藏带有该指令的元素，直到 Vue 实例完成编译并挂载到 DOM 上。
- Vue 在编译完成后会自动移除 v-cloak 指令（或其对应的属性），此时 CSS 规则不再生效，元素正常显示。

使用方法

在模板元素上添加 v-cloak 指令。
编写对应的 CSS 规则，隐藏带有 v-cloak 属性的元素。

<!-- index.html 或组件模板 -->
<div id="app">
  <!-- 使用 v-cloak 指令 -->
  <p v-cloak>{{ message }}</p>
</div>

<!-- 必须在 CSS 中定义规则 -->
<style>
/* 隐藏所有带有 v-cloak 属性的元素 */
[v-cloak] {
  display: none;
}
</style>

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

工作原理

页面加载时，<p v-cloak>{{ message }}</p> 被渲染到页面上，此时它带有 v-cloak 属性。
CSS 规则 [v-cloak] { display: none; } 生效，该 <p> 元素不可见。
Vue 实例初始化并编译模板，将 {{ message }} 替换为 'Hello Vue!'。
Vue 完成编译后，自动移除 v-cloak 属性。
移除属性后，CSS 规则不再匹配，<p> 元素的 display: none 被解除，内容正常显示。

注意：v-cloak 必须与 CSS 规则配合使用才有效。通常建议将相关 CSS 放在 <head> 中的 <style> 标签内，确保在 Vue 加载前就生效。

2. `v-pre` 指令

作用

v-pre 指令用于跳过该元素及其所有子节点的编译过程。

使用场景：
- 当你有一个包含大量 {{ 必须原样显示，而不是被 Vue 当作模板语法解析。
- 用于展示 Vue 模板代码本身（如文档、教程）。
- 优化性能：对于包含大量静态文本且无需响应式更新的区域，使用 v-pre 可以跳过编译，减少 Vue 的工作量。

使用方法

直接在需要跳过编译的元素上添加 v-pre 指令。

<template>
  <div>
    <!-- 正常编译 -->
    <p>{{ message }}</p> <!-- 显示: Hello -->

    <!-- 使用 v-pre：跳过编译，原样显示 -->
    <p v-pre>{{ message }}</p> <!-- 显示: {{ message }} -->

    <!-- v-pre 也作用于子节点 -->
    <div v-pre>
      <p>这段文字不会被编译：{{ name }}</p>
      <span>甚至这个 {{ count }} 也不会被处理</span>
      <!-- 内部的任何 Vue 指令都会被忽略 -->
      <button v-on:click="doSomething">这个点击事件不会生效</button>
    </div>

    <!-- 展示代码示例的理想选择 -->
    <pre v-pre>
      <code>
        new Vue({
          el: '#app',
          data: {
            message: 'Hello'
          }
        })
      </code>
    </pre>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello',
      name: 'Alice',
      count: 100
    }
  },
  methods: {
    doSomething() {
      alert('不会触发，因为 v-pre 忽略了 v-on')
    }
  }
}
</script>

特点

完全跳过编译：该元素内部的所有内容（包括文本、属性、子元素）都不会被 Vue 解析。
性能优化：对于纯静态内容，使用 v-pre 可以避免 Vue 创建不必要的观察者（watcher）和虚拟 DOM 节点，提升渲染性能。
不影响样式：v-pre 不会自动隐藏元素，它只是跳过编译。元素会正常渲染其原始 HTML 内容。

对比总结

特性	`v-cloak`	`v-pre`
主要目的	防止未编译模板的闪烁（FOUC）	跳过编译过程，原样显示内容
作用机制	结合 CSS 隐藏元素，直到编译完成	告诉 Vue 编译器忽略该元素及其子节点
是否需要 CSS	必须配合 `[v-cloak] { display: none }` 等 CSS 规则	不需要
对内容的影响	内容最终会被编译并显示	内容原样显示，不被编译
典型用途	优化首屏加载体验，避免 `{{ }}` 闪烁	展示代码、包含大量静态文本、性能优化
性能影响	微乎其微（只是短暂隐藏）	可能提升性能（跳过编译）

一句话总结：

用 v-cloak “藏起来” 直到 Vue 准备好，解决加载闪烁。
用 v-pre “跳过去” 让 Vue 忽略它，用于展示原始内容或优化静态区域。

THE END

Vue 基础面试题

面试题：Vue 的 v-cloak 和 v-pre 指令有什么作用？

1. v-cloak 指令

作用

使用方法

工作原理

2. v-pre 指令

作用

使用方法

特点

对比总结

1. `v-cloak` 指令

2. `v-pre` 指令