在Vue开发中，异步数据的请求与展示是非常常见且重要的环节。合理处理异步数据，能够显著提升应用的用户体验和性能。

Vue提供了多种方式来进行异步数据请求，其中最常用的就是使用axios库。axios是一个基于Promise的HTTP库，它简洁易用，支持多种请求方式，如GET、POST等。我们可以先安装axios，然后在Vue项目中引入并配置它。例如，在main.js中：

import axios from 'axios'
Vue.prototype.$axios = axios

这样，在组件中就可以方便地使用this.$axios来发起请求。

当我们在组件中请求异步数据时，一般会将数据请求放在created生命周期钩子函数中。这是因为created钩子函数在组件实例创建后立即执行，此时数据观测和event/watcher事件配置已经完成，但DOM还没有挂载。

<template>
  <div>
    <ul v-if="dataList.length > 0">
      <li v-for="item in dataList" :key="item.id">{{ item.title }}</li>
    </ul>
    <p v-else>没有数据</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      try {
        const response = await this.$axios.get('https://example.com/api/data')
        this.dataList = response.data
      } catch (error) {
        console.error('数据请求出错', error)
      }
    }
  }
}
</script>

在上述代码中，fetchData方法通过axios发起GET请求，获取数据后将其赋值给dataList。这里使用了async/await语法，使异步代码看起来更像同步代码，提高了代码的可读性。

在展示异步数据时，我们使用了Vue的指令，如v-if和v-for。v-if用于判断数据是否存在，如果存在则使用v-for遍历并展示数据。

另外，为了提升用户体验，我们还可以在数据请求过程中显示加载状态。比如添加一个loading变量，在请求开始时设为true，请求结束后设为false，然后在模板中根据loading的值显示加载动画。

在Vue中处理异步数据的请求与展示，需要合理选择请求方式，利用好生命周期钩子函数，并结合Vue的指令来实现高效、友好的用户界面。