vue--渲染标签的闪烁问题v-cloak

一、可能出现的情况

在项目在开发中，经常会遇到当数据加载时vue的一些标签就会闪现，然后等数据加载完后消失，这时候就需要用到官网中提到的v-cloak来解决。

当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。

首先说一下经常遇到的情况。

step1,加载时遇到{{value.name}}闪烁，是因为你在渲染时是这么写的<p>{{value.name}}</p>

step2,加载时遇到一个空的盒子里边什么也没有，是因为你在渲染时是这么写的<p v-html="value.name"></p>

二、解决办法

那么，v-cloak要放在什么位置呢，是不是每个需要渲染数据的标签都要添加这个指令，经过试验发现，v-cloak并不需要添加到每个标签，只要在el挂载的标签上添加就可以，这是最简单有效的办法

在vue渲染完页面后指定的整个DOM后才进行显示。它必须和CSS样式一起使用：

<div class="#app" v-cloak>
    <p>{{value.name}}</p>
</div>

// 如果没有彻底解决问题，则在根元素加上 style="display: none;" :style="{display:  block }"
<div class="#app" v-cloak style="display: none;" :style="{display:  block }">
    <p>{{value.name}}</p>
</div>

然后，在css里面要添加

[v-cloak] {
    display: none;
}

这样就可以防止页面闪烁了。

使用 v-cloak 指令之后的效果：

但是有的时候会不起作用，可能的原因有二：

1，v-cloak的display属性被层级更高的给覆盖掉了，所以要提高层级

[v-cloak] {
    display: none !important;
}

2，样式放在了@import引入的css文件中（传统的开发方式）

v-cloak的这个样式放在@import 引入的css文件中不起作用，可以放在link引入的css文件里或者内联样式中

 三、总结

在简单项目中，使用 v-cloak 指令是解决屏幕闪动的好方法。但在大型、工程化的项目中（webpack、vue-router）只有一个空的 div 元素，元素中的内容是通过路由挂载来实现的，这时我们就不需要用到 v-cloak 指令咯。