vue 等待數據遮罩層

在Vue.js中，等待数据（通常在异步操作如API请求、组件计算属性或者虚拟DOM更新完成后）显示遮罩层是一种常见的用户体验优化技巧，它能让用户知道应用正在处理数据或者加载内容。这种遮罩层通常被称为“Loading”、“Mask”或“Spinner”。

当你需要在组件渲染期间显示加载状态，可以采用以下几种方式：

1. **v-if或v-show**: 当数据还未加载完成时，你可以使用`v-if`来隐藏元素，并设置一个条件，比如当一个Promise或计算属性返回时，显示遮罩层，数据加载完毕后再切换回正常视图。

<template>
  <div v-if="isLoading">
    <loading-spinner></loading-spinner>
  </div>
  <div v-else>
    <!-- 数据区域 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true,
      // 其他数据
    };
  },
  mounted() {
    this.loadData().then(() => (this.isLoading = false));
  },
  methods: {
    loadData() {
      return new Promise((resolve) => {
        // 异步请求...
        setTimeout(resolve, 2000); // 模拟延迟
      });
    },
  },
};
</script>

2. **async/await** 或者 `v-model` 和 `ref`: 如果你需要更高级的控制，可以使用async/await，配合`v-model`和`ref`来动态更新遮罩状态。

<template>
  <div ref="content" v-if="!isLoading">
    <!-- 数据区域 -->
  </div>
  <loading-spinner v-if="isLoading"></loading-spinner>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true,
    };
  },
  async created() {
    await this.loadData();
  },
  methods: {
    async loadData() {
      // 异步请求...
      await new Promise((resolve) => {
        setTimeout(resolve, 2000);
      });
      this.isLoading = false;
    },
  },
};
</script>