问题

import { ref, reactive, computed } from "vue";
let list = reactive([]);

const listFn = () => {
  getorderList({ status: 0.value, count: 0 }).then((res) => {
    if (res.data.code == 200) {
      list = res.data.data;
    }
  });
};

直接使用list = res.data.data对list修改 会导致在首次渲染页面没有数据 原因:因为 list直接赋值新数组会导致list的空间指针指向的不是同一个空间所以丢失了双向数据绑定 可以修改成下面的方法就不会丢失了

import { ref, reactive, computed } from "vue";
let list = reactive([{arr:[]);

const listFn = () => {
  getorderList({ status: 0.value, count: 0 }).then((res) => {
    if (res.data.code == 200) {
      list.arr = res.data.data;
    }
  });
};

优化

const status = (v) => {
  if (v==1) {
    return '已完成'
  }else if (v==2) {
    return '已完成'
  }else if (v==3) {
    return '已退款'
  }else if (v==4) {
    return '已取消'
  }
}

上面这种写法比较繁冗 可以修改成下面这种方法 另外使用了 computed 计算属性 computed:当其依赖的属性的值发生变化时，计算属性会重新计算，反之，则使用缓存中的属性值。computed里面是不能传参的，所以用了两个return

import { computed } from "vue";

const statusFn = computed(() => {
  return (v) => {
    return {
      1: "已完成",
      2: "未知",
      3: "已退款",
      4: "已取消",
    }[v];
  };
});