(自用面试题)文本插值时页面闪动的问题如何解决?

81 阅读1分钟

背景:
因为JS代码从上往下执行,当Vue实例没有挂载到标签上的时候,页面有可能显示未编译的Mustache标签。

使用v-cloak指令,原理是先隐藏,替换好值之后再显示最终的值(在Vue解析之前,div中有v-cloak;在Vue解析后,div中没有v-cloak)。

eg:

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

<body>
<div id="app" v-cloak>
<h2>{{message}}</h2>
</div>
</body>