这个指令保持在元素上直到关联实例结束编译。和CSS规则如[v-cloak]{ display: none }一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

很多时候，我们页面模板中的数据是异步获取的，在网络不好的情况下，渲染页面的时候会出现页面闪烁的效果，影响用户体验，v-cloak 指令保持在元素上直到关联实例结束编译，利用它的特性，结合 CSS 的规则 [v-cloak] { display: none } 一起使用就可以隐藏掉未编译好的 Mustache 标签，直到实例准备完毕。

1
2
3
<div class="#app" v-cloak>
    <p>{{value.name}}</p>
</div>
1
2
3
[v-cloak] {
    display: none;
}

需要注意，虽然解决了闪烁的问题，但这段时间内如果什么都不处理的话，会直接白屏，这并不是我们想要的效果，我们应该加一个loading动画或者骨架屏的效果，提升用户体验。