新手Vue+ts生命周期的问题，数据有时候有，有时候没有？

Question

<template>
  <MainTop :titleTop="title"></MainTop>
  <div class="table_container">
    <div>
      <el-table
        style="width=100%"
        :data="tableData"
        stripe
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      >
        <el-table-column
          label="申请名称"
          prop="no"
          :formatter="Format"
        ></el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button
              type="success"
              @click="handleEdit(scope.row.id, scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              @click="handleDelete(scope.row.id, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, reactive, onBeforeMount } from "vue";
import request from "@/api/http";
import { ElMessage, ElMessageBox } from "element-plus";
export default defineComponent({
  name: "PatexamCheckList",
  components: {
    MainTop,
  },
  setup() {
    let tableData = ref([]);
    let temp = reactive([{ no: "", name: "" }]);
    function getName() {
      request({
        url: "",
        method: "get",
      }).then((res: any) => {
        if (res.data.length <= 0) {
          ElMessage({ message: "没有数据", type: "info" });
        }
        temp = res.data;
      });
    }
    getName();
    getTable();
    function Format(row: any, column: any) {
      let no = row[column.property];
      let count = temp.length;
      let i = 0;
      for (i; i < count; i++) {
        if (no == temp[i].no) {
          return temp[i].name;
        }
      }
    }
    function getTable() {
      request({
        url: "",
        method: "get",
      }).then((res: any) => {
        if (res.data.length <= 0) {
          ElMessage({ message: "没有数据", type: "success" });
          return false;
        }
        tableData.value = res.data;
      });
    }
    return {
      tableData,
      selectTable,
      Format,
    };
  },
});
</script>
<style lang="scss">
.table_container {
  padding: 10px;
  background-color: #ffffff;
  height: 94%;
}
</style>

代码简化后的，获取table，获取name，然后通过format修改no的数值，想问下怎么写生命周期，上面的代码有时候能加载出来name，有时候加载不出来，刷新也是，但是不显示的时候只要F12下就能显示，onBeforeMount把getName和getTable放进去也一样。是不是还有其他问题？
代码贴出来：
https://sfc.vuejs.org/#eNrVVb...

Answer 1

1. 这么长的代码 最好直接 用https://sfc.vuejs.org/之类的的东西直接写个demo，别人好直接给你看，直接改
2. 简单看下，大概率是getName方法中的temp = res.data, 你这样赋值，temp是用reactive声明的，你这样直接赋值，自然没法响应重新调用Format函数

Answer 2

我觉得你需要去复习一下异步promise以及async/await的相关知识