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

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

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

怎么使用？

官方用法

<style>
  [v-cloak] {
    display: none;
  }
</style>

<div id="app" v-cloak>
  {{ message }}
</div>

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

可能的原因有二：

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

<style>
  [v-cloak] {
    display: none !important;
  }
</style>

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

@import "./style.css";

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

<link rel="stylesheet" href="./style.css" />

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