v-cloak 是 Vue.js 解决模板初次渲染前页面闪烁问题的轻量指令，需配合 [v-cloak] { display: none; } 样式使用，仅在编译完成时移除，不适用于异步加载等场景。

v-cloak 是 Vue.js 提供的一个轻量级指令，专门用于解决模板初次渲染前的“页面闪烁”问题——即未编译的 Mustache 插值（如 {{ message }}）在 Vue 实例挂载前短暂暴露在页面上，尤其在网络慢、JS 加载延迟时更明显。

为什么会出现闪烁？

浏览器解析 HTML 时会立即渲染原始模板内容。Vue 的编译和数据绑定发生在 JS 执行之后，中间存在时间差。如果样式没做防护，用户就可能看到裸露的 {{ ... }} 或空占位符。

v-cloak 指令会在 Vue 实例编译完成并挂载后自动移除，配合 CSS 可实现“隐藏未就绪模板”的效果。

如何正确使用 v-cloak？

关键在于两步配合：指令 + 样式。缺一不可。

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

立即学习“前端免费学习笔记（深入）”；

• 在根容器（如 <div id="app">）上添加 <code>v-cloak 指令
• 在 CSS 中定义 [v-cloak] { display: none; }，确保未编译时该元素不可见
• 注意：v-cloak 不支持动态绑定，只能写成字面量形式 v-cloak，不能写 :v-cloak 或 v-bind:v-cloak

常见误区与注意事项

v-cloak 并非万能，它只控制“Vue 编译完成前”的可见性，不解决资源加载慢本身：

• 它对异步组件、懒加载路由、API 请求返回前的空白无直接作用——这些需结合 loading 状态或骨架屏
• CSS 必须写在全局样式中（如 style 标签或外链 CSS），且不能被 scoped 影响，否则可能失效
• 若使用构建工具（如 Vue CLI），确保 CSS 在 JS 执行前已加载，避免因样式晚于 JS 导致短暂闪现

替代方案对比（简单场景下可选）

对于更精细的加载控制，可考虑：

• v-if + loading 状态：手动管理显隐，适合需要展示加载动画的场景
• 骨架屏（Skeleton Screen）：用灰色块模拟结构，体验更自然，但开发成本略高
• 服务端渲染（SSR）：首屏直出 HTML，从根本上避免闪烁，但架构复杂度上升

v-cloak 是最轻量、零逻辑侵入的方案，适合多数传统单页应用的快速优化。