vue初始化页面闪动问题

背景

使用vue开发时，在vue初始化之前，由于div是不归vue管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于{{message}}的字样，虽然一般情况下这个时间很短暂，但是我们还是有必要让解决这个问题的。

解决方法

vue指令：v-cloak渲染指令(v-cloak 指令是解决屏幕闪动的好方法)

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

方法一：

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

而且，在css里面要添加

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

方法二：（第一种没有彻底解决问题）

在根元素加上

style=“display: none;” :style=“{display: block }”

总结

v-cloak原理是先通过样式隐藏内容，然后在内存中进行值的替换，将替换的内容再反馈给界面，数据渲染完场之后，v-cloak 属性会被自动去除。