使用 v-cloak 解决刷新或加载时出现闪烁（未编译的 Mustache 标签 ）

在使用 vue 时，绑定 Vue 实例，在页面刷新或加载时会闪烁类似{{ message }}这样的信息。

使用 v-cloak 可以解决该问题

怎么使用？

官方用法

  {{ message }}

为什么我用的 v-cloak 无效？

可能的原因有二：

1、v-cloak 的 display 属性被权重更高的 display 覆盖了，所以需要增加权重

2、样式放在了@import 引入的 css 文件中

@import "./style.css";

使用 @import 是在 DOM 完全载入后才会进行引入，如果我们将 [v-cloak] 写在 @import 引入的 css 文件中，就会导致页面仍旧闪烁。

为了避免这种情况，我们可以将[v-cloak] 写在 link 引入的 css 中，或者写一个内联样式中，这样就可解决。