Vue.js:从firebase存储中检索数据后如何异步加载模板？

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

<script>
export default {
  data() {
    return {
      data: [] // 用于存储从firebase中检索的数据
    };
  },
  created() {
    // 在组件创建时，异步加载数据
    this.loadData();
  },
  methods: {
    async loadData() {
      // 通过firebase提供的API进行数据检索
      const snapshot = await firebase.firestore().collection('yourCollection').get();
      
      // 将检索到的数据存储到data属性中
      this.data = snapshot.docs.map(doc => ({
        id: doc.id,
        name: doc.data().name
      }));
    }
  }
};
</script>

import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App),
}).$mount('#app');