v-cloak（自用）

v-cloak

一、v-cloak是什么？

v-cloak是用于防止插值闪烁问题

插值闪烁：

在网速较慢时，页面已经加载，而vue.js还未加载，我们使用的{{}}（插值表达式）会直接显示到页面上，当vue.js加载完成后，才会将{{}}解析为vue的语法，重新将数据渲染，造成短暂的闪烁问题，影响用户体验。

二、使用v-cloak防止插值闪烁：

在需要防止插值闪烁的标签内，添加v-cloak,页面一开始会将其当做一个属性，在css中通过属性选择器，选择这个标签，[v-cloak]｛display：none;｝,当vue.js加载后，会遍历所有标签，找出v-cloak,并删除这个属性。

<template>
  <div class="home">

    <div>
      <span>v-cloak</span>
      <div v-cloak>{{num}}</div>
    </div>
  </div>
</template>
<style lang="" scoped>
  [v-cloak]{
    display: none;
  }
</style>