vue 插值闪烁与v-cloak防闪问题

使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的​​{{}}​​，

加载完毕后才显示正确数据，我们称为插值闪烁。

谷歌浏览器选择slow 3G进行调试

解决方案1

可以使用 v-text 和 v-html 指令来替代{{}}

<div id="app">
v-text:<span v-text="hello"></span> <br />
v-html:<span v-html="hello"></span>
</div>

<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
hello: "<h1>大家好</h1>"
}
})
</script>

解决方案2

css：

[v-cloak]{
    display: none;
}

html：

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

在简单项目中，使用 v-cloak 指令是解决屏幕闪动的好方法。

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