vue前端页面数据加载添加loading效果的实现

下面是详细讲解“Vue前端页面数据加载添加loading效果的实现”的完整攻略。

1.原理解析

在前端开发中，经常需要处理异步请求和数据的加载问题。而在数据加载时，为了防止用户在等待时出现页面空白或者无反应的情况，我们需要使用loading动画来提示用户数据正在加载中。Vue2.x提供了v-if指令和自定义组件等方式，可以非常方便地实现loading效果，具体步骤如下：

1. 定义一个loading组件
2. 在需要加载数据的组件中，使用v-if指令绑定loading的状态
3. 发送请求前，将loading状态置为true
4. 数据加载完成后，将loading状态置为false

2. 示例说明

示例一

假设现在需要在页面中加载一组数据，并且当数据加载过程中需要展示loading效果。

首先，我们定义一个Loading组件，它可以接受一个props参数loading用来控制它的显隐状态。具体代码如下：

<template>
  <div v-if="loading">
    <img src="/loading.gif" alt="loading" />
  </div>
</template>
<script>
export default {
  props: {
    loading: Boolean
  }
}
</script>

接下来，在需要加载数据的组件中，我们将loading组件引入，并使用v-if指令绑定loading的状态。

<template>
  <div>
    <loading :loading="isLoading" />
    <ul>
      <li v-for="(item, index) in dataList" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>
<script>
import Loading from './Loading.vue'

export default {
  components: {
    Loading
  },
  data() {
    return {
      isLoading: false,
      dataList: []
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.isLoading = true
      // 模拟数据请求
      setTimeout(() => {
        this.isLoading = false
        this.dataList = ['apple', 'banana', 'orange']
      }, 2000)
    }
  }
}
</script>

可以看到，在mounted挂载钩子函数中，我们使用fetchData方法来模拟数据请求的过程。在发送请求前，将isLoading状态置为true，通知loading组件开始显示loading效果，在数据加载完成后，将isLoading状态置为false，loading组件则会自动隐藏。

示例二

非常方便的通过v-if指令绑定loading组件的状态来实现Loading效果，但如果某个请求非常耗时，有可能会对页面性能产生影响，为了避免页面的卡顿，我们需要对loading组件进行优化，让它能够延迟显示。

首先，在loading组件中通过v-show替换v-if，因为v-if会在每次绑定状态变化时重新创建和销毁这个组件实例，而v-show只是单纯地控制CSS的显隐。

<template>
  <div class="loading" v-show="show">
    <i class="loading-icon"></i>
  </div>
</template>
<script>
export default {
  data() {
    return {
      timer: null,
      show: false
    }
  },
  methods: {
    showLoading() {
      // 如果延迟时间小于100ms，则直接显示loading组件
      this.timer = setTimeout(() => {
        this.show = true
      }, 100)
    },
    hideLoading() {
      // 如果延时时间小于100ms，则直接隐藏loading组件
      clearTimeout(this.timer)
      this.show = false
    }
  }
}
</script>

接下来，在需要加载数据的组件中使用了两个钩子函数beforeUpdate和updated来控制loading组件的显示和隐藏，代码如下：

<template>
  <div>
    <loading ref="loading" />
    <ul>
      <li v-for="(item, index) in dataList" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>
<script>
import Loading from './Loading.vue'

export default {
  components: {
    Loading
  },
  data() {
    return {
      dataList: []
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      // 显示loading效果
      this.$refs.loading.showLoading()
      // 模拟数据请求
      setTimeout(() => {
        this.$refs.loading.hideLoading()
        this.dataList = ['apple', 'banana', 'orange']
      }, 3000)
    }
  },
  beforeUpdate() {
    this.$refs.loading.hideLoading()
  },
  updated() {
    this.$refs.loading.showLoading()
  }
}
</script>

在fetchData方法中，我们使用this.$refs.loading.showLoading()来启动loading组件，在数据加载完成后，使用this.$refs.loading.hideLoading()来关闭它。

在beforeUpdate钩子函数中，我们通过隐藏loading组件的方式来卡住页面，让它在下次更新时才显示。这样一来，即使数据请求需要耗费很长的时间，页面也不会在请求时变得卡顿不响应，用户体验也会得到大大的提升。

3. 总结

以上就是Vue前端页面数据加载添加loading效果的实现攻略，我们可以通过v-if指令、自定义组件、钩子函数等方法实现loading效果。在实际项目中，我们可以根据具体情况选择合适的方式来实现loading效果，提高用户体验，增强页面性能。