vue组件异步获取数据怎么渲染到页面

在 Vue 组件中异步获取数据后，可以将数据存储在组件的 data 属性中，然后通过模板语法或计算属性将数据渲染到页面上。

例如，在组件的 created 钩子函数中使用异步请求获取数据：

created() {
  axios.get('/api/data').then(res => {
    this.dataList = res.data;
  }).catch(err => {
    console.error(err);
  });
}

这里将获取到的数据存储在了组件的 dataList 属性中。然后可以在模板中通过 v-for 指令将数据渲染到页面上：

<template>
  <div>
    <ul>
      <li v-for="item in dataList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

也可以通过计算属性对数据进行处理后再渲染到页面上：

<template>
  <div>
    <ul>
      <li v-for="item in processedData" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: []
    };
  },
  created() {
    axios.get('/api/data').then(res => {
      this.dataList = res.data;
    }).catch(err => {
      console.error(err);
    });
  },
  computed: {
    processedData() {
      // 对数据进行处理
      return this.dataList.map(item => {
        return {
          id: item.id,
          name: item.name.toUpperCase()
        };
      });
    }
  }
};
</script>

在这个例子中，使用了一个计算属性 processedData 对 dataList 进行了处理，然后将处理后的数据渲染到页面上。