在VueJS中Http请求后的运行时呈现组件

axios.get('/api/data')
  .then(response => {
    this.data = response.data;
  })
  .catch(error => {
    console.error('数据获取失败:', error);
    this.errorMessage = '无法获取数据，请稍后再试。';
  });

// 错误的做法
this.someObject.newProperty = 'newValue';

// 正确的做法
this.$set(this.someObject, 'newProperty', 'newValue');

import { debounce } from 'lodash';

methods: {
  fetchData: debounce(function() {
    axios.get('/api/data')
      .then(response => {
        this.data = response.data;
      });
  }, 300)
}

<template>
  <div>
    <h1>数据列表</h1>
    <ul>
      <li v-for="item in data" :key="item.id">{{ item.name }}</li>
    </ul>
    <p v-if="errorMessage">{{ errorMessage }}</p>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const data = ref([]);
    const errorMessage = ref('');

    onMounted(() => {
      axios.get('/api/data')
        .then(response => {
          data.value = response.data;
        })
        .catch(error => {
          console.error('数据获取失败:', error);
          errorMessage.value = '无法获取数据，请稍后再试。';
        });
    });

    return {
      data,
      errorMessage
    };
  }
};
</script>