解决Vue 组件未渲染好，页面组件标签闪烁问题

Vue 有个 v-cloak 指令，这个指令保持在元素上直到关联实例结束编译。

https://cn.vuejs.org/v2/api/#v-cloak

和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
也就是组件标签准备完毕时，会去掉元素上的 v-cloak 属性，也就显示了元素。

例：

[v-cloak] {
  display: none;
}

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

给隐藏标签的这段时间加上loading动画，如下例子：

[v-cloak] > * {
  display: none;
}

[v-cloak],
[v-cloak]:before,
[v-cloak]:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load 1.8s infinite ease-in-out;
  animation: load 1.8s infinite ease-in-out;
}

[v-cloak] {
  color: #bcebfb;
  font-size: 10px;
  margin: 0 auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

[v-cloak]:before,
[v-cloak]:after {
  content: '';
  position: absolute;
  top: 0;
}

[v-cloak]:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

[v-cloak]:after {
  left: 3.5em;
}

@-webkit-keyframes load {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

@keyframes load {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

冒泡loading效果：