谈谈 Vue.js 中的 v-cloak 指令

场景：

1.当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。

2.当向后台接口请求数据，数据还没有请求过来的时候，出现 “白屏” ，可以使用 v-cloak 进行优化，加上加载 动画/GIF

我们可以使用 v-cloak 指令来解决这一问题。

【这里主要来说一下 2，如果你想要了解关于 1 的更多 可以点击 这里】

1.使用带有 v-cloak 指令的盒子

<div id="box" v-cloak>
  ......
</div>

2.内部准备好两个结构

两个结构分别是 “白屏” 时加载的样式、图片等 请求到数据后展示的数据内容

      <div class="loading" v-if="loading">
        <img src="./loading (1).gif" alt="" />
      </div>
      <ul v-else>
        <li v-for="item in result">
          <div class="left">
            <img
              class="imgs"
              :src="item.author.avatar_url"
              :title="item.author.loginname"
            />
            <span>{{item.reply_count}}/{{item.visit_count}}</span>
            <h5>{{item.title}}</h5>
          </div>
          <div class="right">{{item.last_reply_at|formatTime}}</div>
        </li>
      </ul>

3.设置 v-cloak 样式

      [v-cloak] {
        display: none;
      }

4.在数据data中定义一个开关

        data: {
          result: [],
          loading: false,
        },

5.在请求之前 loading 开启

        beforeMount() {
          //开启开关
          this.loading = true;
          this.axios_get();
        },

6.在请求数据结束后 loading 关闭

          axios_get() {
            let url = "https://XXXXXXXXXXXXXX";
            axios
              .get(url)
              .then((res) => {
                if (res.data.status === 200) {

                  this.result = res.data.data;

                  //关闭开关
                  this.loading = false;
                }
              })
              .catch((err) => console.log(err));
          },

7.最后来看一下效果吧

【为了方便看到效果 开启 slow3G 模式】

8.扩展

相信，有机智的小伙伴，发现了 这种做法 就和 “节流阀” 的用法是几乎一模一样的。不同的点就是 在触发请求的地方还需要进行判断 判断是否 节流阀 是否开启，如果开启 就不让其发起请求，反之可以进行请求......