vue 加载页面出现闪烁--解决之道欢迎补充纠错。。。

一、状况描述

{{}} 导致的闪烁问题

v-show/v-if隐藏的元素出现导致的闪烁

二、解决方法

1.使用v-bind或v-text代替{{}}

因为在vue内部,所有的双括号会被编译成textNode的一个v-text指令,使用v-text会有更好的性能，并且可以避免FOUC(Flash of Uncompiled Content),也就是闪烁问题

2.使用v-cloak指令

Vue提供了v-cloak指令,v-cloak指令会保持在元素上直到关联实例结束编译和CSS一起用时,可隐藏未编译的Mustache标签直至实例准备完毕

v-clock的元素设置为display:none,使其隐藏掉, 解析到带有v-clock的节点时,会将attribute和class同时remove掉

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