v-cloak

Vue 里的 v-cloak 到底是什么？（超级通俗讲解）

v-cloak 是 Vue 内置的指令，专门用来解决一个问题：

页面加载时，闪现 {{插值表达式}} 的问题

也就是俗称的 "闪烁" ：页面刚加载 → 先显示 {``{ name }} → 然后才变成真实数据v-cloak 就是让这个 {{}} 在 Vue 渲染完成前隐藏。

---

它的原理超级简单

1. 你给元素加 v-cloak
2. Vue 没编译完成前：元素保留 v-cloak 属性
3. Vue 编译完成后：自动删掉 v-cloak 属性

配合 CSS 就能实现：

css

/* 只要有 v-cloak 属性，就隐藏这个元素 */
[v-cloak] {
  display: none !important;
}

---

怎么用？（复制即用）

1. 先加 CSS（必须加！）

css

/* 全局 CSS 里加这一段 */
[v-cloak] {
  display: none !important;
}

2. 给需要的元素加上 v-cloak

html

预览

<!-- 加在最外层容器最方便 -->
<div id="app" v-cloak>
  {{ message }}
</div>

✅ 效果：Vue 没加载好 → 不显示内容 Vue 加载好 → 自动显示 不会再看到 {``{ }} 闪一下。

---

常见使用场景

• 使用 CDN 方式引入 Vue（最容易闪烁）
• 页面网络慢、Vue 加载延迟
• 首页大列表、大量插值表达式时防闪烁

---

小提醒

• 它不需要在 components 里注册
• 它不需要 data 定义
• 它是 Vue 自带指令，直接用就行

---

总结

• v-cloak = 防插值表达式闪烁
• 必须配合 CSS [v-cloak] { display:none } 才能生效
• 加在最外层容器，一劳永逸解决闪烁问题