Vue中API获取的数据无法填充至表格，热重载后恢复正常

问题根源 #

你用普通let data声明的变量不属于Vue的响应式系统，Vue无法追踪它的变化。即便你成功获取到API数据，数据更新时Vue感知不到，因此视图（表格）不会同步更新。而修改代码保存时触发了Vue的热重载，此时已有数据会被重新渲染到视图里，所以表格能正常显示。

解决方案 #

把普通变量替换成Vue的响应式数据，推荐用Vue 3的Composition API实现：

方案1：使用ref（适配数组/简单类型） #

import { ref } from 'vue';

// 声明响应式数组
const data = ref([]);

const fetchData = async (inputString: string) => {
  // 给ref变量的value属性赋值
  data.value = await getData(inputString);
  console.log('Data', data.value);
}

方案2：使用reactive（适配复杂对象结构） #

如果返回的数据是多层嵌套的复杂对象，可使用reactive：

import { reactive } from 'vue';

const state = reactive({
  data: []
});

const fetchData = async (inputString: string) => {
  state.data = await getData(inputString);
  console.log('Data', state.data);
}

使用提示 #

• 模板中使用ref变量时无需加.value，Vue会自动解析，比如表格用v-for="item in data"遍历即可。
• 确保表格的渲染逻辑完全依赖于这个响应式数据。

内容的提问来源于stack exchange，提问作者deisy