vue数据渲染出现闪烁问题及v-cloak没生效

摘要: vue数据渲染出现闪烁

今天在使用vue进行数据渲染的时候发现当我不停的按F5刷新的时候出现了{{message}}的情况。经过多方查找我知道了要解决这个问题需要添加v-cloak指令，这时有一个问题困扰了我很久，我明明按照大家所说的加了v-cloak为什么还是没有用。后来折腾了很久才发现原因，先不说为什么，看看代码来：
在html中：

<ul v-for="item in person">
<li v-cloak>{{item.name}}</li>
</ul>

在CSS中:

[v-cloak]:{diapsly:none;}

在script中：

var vm = new Vue({
el:'#myapp',
date:{
person:[
{name:'zhangsan'},
{name:'lisi'},
{name:'wangwu'}
]
}
})

最开始是没有css样式，当我发现我不断的刷新的时候页面上会出现{{item.name}}一闪而逝,这时我在li上面添加了v-cloak指令，并添加了css样式。此时，我发现还是会有闪烁，我发现他根本没有执行css的样式。
现在大家应该都猜到原因了吧，因为我是在for循环里面添加的v-cloak。之前查的资料是直接使用。

css:
[v-cloak]:{display:none}
html:
<div v-cloak>{{message}}</div>

看到别人的写法以后我就以为是直接在要渲染的该标签添加指令，这也导致了我的v-cloak一直没有起到作用。最后，我把v-cloak添加到了v-for上，一切终于变得正常了。

<ul v-for="item in person" v-cloak>
<li >{{item.name}}</li>
</ul>

注意：
昨天又遇到一个坑，当我使用了v-cloak时发现他并没有生效，页面仍然出现了闪烁。通过多次调试检查才发现原来是我的[v-cloak]的dispaly属性被优先级别搞的样式覆盖导致，最后我给他加了 !important。
后来发现有两种情况会导致v-cloak没有生效。
1、v-cloak的display属性被层级更高的给覆盖了，解决方案如我之前一样。

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

2、样式放在了@import引入的css文件中,解决方案：

放入由link引入的css文件里；

写在内联样式中。