v-cloak用于解决Vue页面初次加载时未编译的{{ }}插值闪烁问题；它作为标记型指令，在实例挂载完成时自动移除，需配合[v-cloak]{display:none}样式及根容器使用，仅适用于客户端渲染场景。
v-cloak 是 Vue 提供的一个轻量标记型指令，专门用来防止页面初次加载时出现未编译的 {{ }} 插值闪烁。它本身不执行逻辑，只作为“Vue 实例已就绪”的信号——挂载完成即自动移除，配合 CSS 才真正起作用。
它解决什么问题？
浏览器解析 HTML 时会立刻渲染原始模板内容，而 Vue 的数据绑定和模板编译发生在 JS 执行之后。这段空档期里，用户可能看到裸露的 {{ message }}、空占位符，甚至整个区域闪一下再变正常，尤其在网络慢或脚本延迟加载时更明显。
怎么让它真正生效？
必须同时满足三个条件，缺一不可：
- 在项目最早加载的 CSS 文件（如 app.css 或 main.scss）中写入：
[v-cloak] { display: none; } —— 不建议用@import引入，也不要用内联<style> - 只加在根容器上，比如
<div id="app" v-cloak>或<div class="app" v-cloak>，子元素无需重复添加 - 避免被其他样式覆盖：如果存在
div { display: block !important }这类高权重规则，可改用 [v-cloak] { display: none !important; }
为什么有时候加了还是闪烁？
常见原因很具体：
立即学习“前端免费学习笔记（深入）”；
- DevTools 的 Elements 面板里，刚刷新瞬间看不到 v-cloak 属性 → 检查 CSS 文件是否加载失败（看 Network 面板），或漏写了指令
- v-cloak 属性一直存在没消失 → Vue 实例没成功挂载，检查控制台报错、
el选择器是否写错、<script>是否放在 DOM 后面 - 属性消失了但仍有闪烁 → 打开 Computed 样式，确认最终 display 值是不是 none；如果不是，说明被别的 CSS 覆盖了
哪些情况它不适用？
v-cloak 只对客户端渲染（CSR）有效：
- 服务端渲染（SSR）或静态站点生成（SSG）中不会出现未编译插值，所以不需要
- 单文件组件（.vue）在构建阶段就完成了模板编译，运行时已无原始 {{ }}，v-cloak 不起作用
- 异步加载内容（比如接口返回后再渲染）不属于 v-cloak 的覆盖范围，需配合 loading 状态或骨架屏
