v-cloak 实现vue实例未编译完前不显示

前言：

由于网速原因，（ps：之前同事无意间在网速很差的情况下测出的）在使用vue开发时，会由于vue实例还没编译成功的时候数据绑定的"Mustache"标签会闪现一下，造成不好的用户体验。于是想起了可以通过v-cloak指令来隐藏未编译完成的Mustache标签。

看截图：

ps：在测试网速在较差的情况下页面的展示情况，可以通过chrome开发者工具的Network进行网速的限制，看截图：

v-cloak

用法：

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

示例：

[v-cloak] {
    display:none;
}

<div v-cloak>
  {{ message }}
</div>

不会显示，直到编译结束。

总结

通过使用v-cloak我们就可以很好的避免了vue实例还未编译完成之前不会显示Mustache标签了，但是这样还是存在一个问题，就是白屏状态，于是我们可以在v-cloak的兄弟节点通过css设置一个loading的动画，让用户知道页面还在加载。

看截图：

而vue实例的创建是在mounted状态时候完成的，于是我们可以通过data设置一个loading状态值，当实例编译完成后就调用mounted钩子修改修饰loading状态的值实现隐藏。这样我们就能在网速比较差的情况下也能给用户一个比较好的体验。

补充：

v-cloak无效的情况：

1.在实际项目开发中，挺多是通过import来加载css文件的，而import进来的样式文件是DOM载入后才引进来的，如果将[v-cloak]写在import进来的样式文件上仍会出现{{}}闪烁的问题，可以通过写在link标签引进来的css文件中或者设置内联样式。

2.还有的情况就是优先级的问题，[v-cloak]设置的样式被覆盖了，也可以通过暴力的手段，通过设置!important来提高优先级。

 

参考资料：

vue官网：https://cn.vuejs.org/v2/api/#v-cloak