Vue.js 中实现异步数据加载时的 Loading 效果

在前端开发中，我们经常需要从服务器获取数据。由于网络请求的不确定性，数据可能需要一些时间才能返回，这就会导致页面在等待数据的过程中出现卡顿或者空白的情况，给用户带来不好的体验。因此，我们需要在异步数据加载时添加 Loading 效果，提示用户数据正在加载中。

在 Vue.js 中，实现异步数据加载时的 Loading 效果非常简单，我们可以通过 Vue 的生命周期函数和条件渲染来实现。

使用 Vue 生命周期函数

Vue 提供了一些生命周期函数，可以让我们在组件的不同阶段执行一些操作。其中，我们可以使用 mounted 和 beforeUpdate 生命周期函数来实现 Loading 效果。

mounted 生命周期函数

mounted 生命周期函数在组件挂载到 DOM 上后执行，此时可以通过异步请求获取数据。我们可以在 mounted 函数中添加一个 Loading 状态，表示数据正在加载中。当数据请求成功后，将 Loading 状态设为 false，数据将会显示在页面上。

// javascriptcn.com 代码示例
<template>
  <div>
    <div v-if="loading">Loading...</div>
    <ul v-else>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      loading: true
    };
  },
  mounted() {
    // 发起异步请求
    fetchData().then(data => {
      this.list = data;
      this.loading = false;
    });
  }
};
</script>

beforeUpdate 生命周期函数

在一些特殊的情况下，我们可能需要在数据更新前添加 Loading 效果，这时可以使用 beforeUpdate 生命周期函数。

// javascriptcn.com 代码示例
<template>
  <div>
    <div v-if="loading">Loading...</div>
    <ul v-else>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="add">Add</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      loading: false
    };
  },
  mounted() {
    // 发起异步请求
    fetchData().then(data => {
      this.list = data;
    });
  },
  methods: {
    add() {
      this.loading = true;
      // 发起异步请求
      addData().then(data => {
        this.list.push(data);
        this.loading = false;
      });
    }
  },
  beforeUpdate() {
    if (this.loading) {
      // 显示 Loading 效果
    }
  }
};
</script>

使用条件渲染

除了使用生命周期函数，我们还可以使用条件渲染来实现 Loading 效果。通过给 Loading 元素添加 v-if 指令，可以根据数据是否加载完成来决定是否显示 Loading 元素。

// javascriptcn.com 代码示例
<template>
  <div>
    <div v-if="loading">Loading...</div>
    <ul v-else>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      loading: true
    };
  },
  mounted() {
    // 发起异步请求
    fetchData().then(data => {
      this.list = data;
      this.loading = false;
    });
  }
};
</script>

总结

在 Vue.js 中实现异步数据加载时的 Loading 效果非常简单，我们可以通过 Vue 的生命周期函数和条件渲染来实现。在实际开发中，我们可以根据实际情况选择使用哪种方式，以达到最佳的用户体验。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65867e2cd2f5e1655d0f1e71