v-cloak通过CSS隐藏未编译插值，待Vue实例挂载完成自动移除属性实现防闪烁；需三步：全局定义[v-cloak]{display:none}、根容器添加指令、避免样式覆盖。

Vue 页面加载时出现 {{ }} 闪烁，本质是浏览器先渲染了原始 HTML，而 Vue 实例还没来得及编译模板。最直接、轻量、无需额外依赖的解法就是 v-cloak——但它不是加了就生效，必须配合 CSS 才真正起作用。

为什么 v-cloak 能解决闪烁？

v-cloak 是 Vue 内置的纯标记型指令，本身不执行逻辑。它的作用很明确：在 Vue 实例完成编译并挂载到 DOM 后，自动从元素上移除该属性。换句话说，它就是一个“我已准备就绪”的信号灯。

关键在于：你得提前告诉浏览器——只要看到这个属性，就别显示内容。

• 浏览器解析 HTML 时，<div id="app" v-cloak>{{ message }}</div> 已存在，但此时还带 v-cloak 属性
• 你用 CSS 把所有带 v-cloak 的元素设为 display: none，用户就完全看不到
• Vue 挂载完成后，v-cloak 被移除，CSS 规则失效，内容自然浮现

正确使用的三个硬性条件

缺一不可，否则可能“加了等于没加”。

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

• CSS 必须全局生效且优先级足够：在项目最早加载的样式文件（如 app.css 或 main.scss）中写入：
  [v-cloak] { display: none; }
  避免放在 @import 引入的子文件里，也别用内联 style 标签（加载时机不可控）
• 指令只加在根容器上即可：比如 <div id="app" v-cloak> 或 <code><div class="app" v-cloak>。子元素不用重复加，v-cloak 的隐藏效果会继承作用于其整个内容树 <li> <strong>防止被其他样式覆盖</strong>：如果页面里有 <code>div { display: block !important } 这类高权重规则，[v-cloak] 可能失效。稳妥做法是：
  [v-cloak] { display: none !important; }

常见失效原因与排查方法

如果还是看到闪烁，按顺序快速检查：

• 打开 DevTools → Elements 面板，在页面刚刷新的瞬间暂停（可用 F8 或勾选 “Disable cache” 后刷新），看根容器是否确实带有 v-cloak 属性
• 若属性始终存在：说明 Vue 实例没成功挂载——查控制台报错、确认 el 选择器是否写错、script 是否在 DOM 之后加载
• 若属性压根没出现：说明你漏写了 v-cloak，或 CSS 文件根本没加载进来（检查 Network 面板）
• 右键检查元素 → Computed 样式里搜索 display，确认最终计算值是不是 none；如果不是，说明被别的 CSS 覆盖了

它不能解决什么？别指望它包打天下

v-cloak 只管“插值表达式未编译前的暴露”，对其他类型的闪动无能为力：

• 接口数据还没回来，页面空白或显示默认占位符 → 用 v-if="dataLoaded" 控制渲染时机
• 路由切换时组件白屏或跳变 → 配合 <suspense></suspense> 或路由级 loading 状态
• 首屏内容长时间为空 → 考虑骨架屏（skeleton screen）或服务端渲染（SSR）
• 动画突兀、显隐生硬 → 加 <transition></transition> 和对应 CSS 过渡类

实际项目中，v-cloak 往往只是第一道防线，后面常要搭配数据加载控制或骨架方案一起用。