v-cloak 实现的原理，是 vm 创建好之后，动态 移除 v-cloak 属性，从而 显示 插值表达式的节点应用场景：当网络比较卡的时候，我们可以为 最外层的 元素，添加 v-cloak ，防止用户看到 插值表达式

实例:

<style>
    [v-cloak] {
      display: none;
    }
  </style>
<!-- v-cloak 实现的原理，是 vm 创建好之后
动态 移除 v-cloak 属性，从而 显示 插值表达式的节点 -->
  <div id="app" v-cloak>
    <h3>{{msg}}</h3>
    <h3>{{1+1}}</h3>
    <h3>{{boo ? '条件为真' : '条件为假' }}</h3>
    <h3>{{msg.length}}</h3>
    <!-- 注意：插值表达式，只能用在内容区域，不能用在属性节点中； -->
    <h3>{{arr[1]}}</h3>
  </div>
  <script src="./lib/vue-2.5.16.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello vue.js',
        boo: false,
        arr: [1, 2, 3]
      }
    })
  </script>

转自:https://www.jianshu.com/p/6c1c5c3c44d0