v-cloak

在 Vue.js 中，v-cloak 是一个专门用来解决“闪烁问题”（Flash of Uncompiled CSS/HTML）的官方内置指令。

当用户的网速较慢，或者 Vue 的 JavaScript 脚本还没有完全加载和解析完成时，网页上会直接把 Vue 的原生双大括号标签 {{ message }} 或者是未渲染的 HTML 结构暴露出来。等到 Vue 加载完毕，这些标签又会突然变成真实数据。这种几百毫秒的“丑陋过渡”就叫闪烁。

v-cloak 的作用，就是在 Vue 没准备好之前，把这些未渲染的标签死死藏住。

怎么使用？（必须配合 CSS）

单单在 HTML 里写 v-cloak 是没有任何效果的，它必须和 CSS 中的属性选择器配合使用。

1. 编写 CSS 样式
   原理：这行 CSS 意思是，只要标签上带有 v-cloak 这个属性，就让它在页面上完全隐藏（display: none）。
   在你的样式表里（通常放在 标签中），加上这行代码：

[v-cloak] {
  display: none;
}

2. 在 HTML 根节点挂上指令
   把 v-cloak 挂在你 Vue 实例控制的根元素（或者特定的子元素）上：

<div id="app" v-cloak>
  <h1>欢迎来到控制台</h1>
  <p>{{ text }}</p>
</div>

它的底层工作原理

• 页面首次加载：浏览器下载完 HTML 和 CSS，发现 #app 节点上有 v-cloak 属性。由于你写了 CSS 选择器 [v-cloak] { display: none; }，浏览器会立刻隐藏整个 #app 区域，页面上一片空白（或者只显示非 Vue 控制的骨架屏）。

• Vue 脚本介入：浏览器下载并执行了 Vue.js 核心代码，Vue 开始编译模板，把 {{ text }} 替换成真实的数据。

• 完美蜕变：当 Vue 彻底编译并挂载（Mount）完成后，它会自动把 HTML 节点上的 v-cloak 属性删掉。

• 展现实体：属性一旦被删，对应的 CSS 隐藏样式瞬间失效，用户一眼看到的就是已经渲染好真实数据的完美页面，中间没有任何恶心的“乱码大括号”闪烁。

什么时候使用

• 如果你用的是 Uni-App (HBuilderX)、Vue CLI、Vite、Nuxt 等现代脚手架工具（编译型/工程化开发）：

• 基本不需要用。 因为这些工具在打包时，已经提前把 .vue 文件里的模板编译成了 JavaScript 渲染函数（VNode），或者直接用了服务端渲染（SSR）。浏览器拿到的时候就已经没有 {{ }} 这种东西了。

• 如果你用的是直接在 HTML 里引入 <script src=“vue.js”> 的传统开发模式：
  强烈建议使用。 尤其是在网络不稳或项目文件较大的时候，v-cloak 是保住前端页面首屏体验的低成本防线。

v-pre

v-pre 正好是另一个方向：这块内容你别编译，原样显示。比如写一个文档页，要展示 Vue 模板语法
一旦你在某个 HTML 标签上写了 v-pre，Vue 的编译器在扫描 DOM 树时，只要看到它，就会直接绕过去，把它当成纯粹的静态 HTML 字符串处理，不再去费心思解析里面有没有插值表达式（{{ }}）、有没有指令（如 v-if、v-for）等。

它的两大核心应用场景

1. 场景一：大幅提升纯静态内容的性能（生产优化）
   如果你的页面上有一大块内容是完全固定不变的纯文本或静态结构（例如：一篇长篇的用户服务协议、帮助文档、或者是复杂的静态 SVG 图标集群），这些内容里面绝对没有 Vue 的动态绑定

<div v-pre class="agreement-box">
  <h3>用户服务协议</h3>
  <p>第一条：本协议是您与平台之间关于...</p>
  <p>第二条：平台保留在法律允许范围内的解释权...</p>
 </div>

2. 场景二：原样输出双大括号 {{ }}（展示文本）
   如果你正在写一个技术博客、前端教程网站，或者需要把 Vue 的双大括号语法 {{ message }} 作为普通的文本直接在网页上打出来给用户看，如果不加处理，Vue 会强行去解析它，导致报错（提示变量不存在）。

<div id="app">
  <p>普通渲染：{{ msg }}</p>

  <p v-pre>教程示例：在 Vue 中，我们使用 {{ msg }} 来绑定数据。</p>
</div>

区别