Vue中Computed Property不更新问题：异步函数传递对象数组至Vue组件的解决方案咨询

你的问题核心在于异步操作的时序问题以及响应式数据的感知缺失，我来一步步拆解并给出修复方案：

为什么当前代码无效？ #

1. 异步时序问题：getList()是异步函数，当你在ModelList.js中返回{ tableList: modelList }时，crud('model').list()的请求还没完成，此时modelList还是初始的空数组（也就是你看到的null）。
2. 响应式缺失：就算后续modelList = data赋值成功，这个变化也不会触发Vue的响应式更新——因为modelList不是Vue的响应式数据，而且返回对象里的tableList已经绑定了最初的空数组引用，后续赋值不会改变这个引用，Vue自然无法感知到数据变化。

修复方案 #

方案1：让ModelList返回Promise，组件等待异步完成 #

这种方式适合保留原有封装逻辑，让组件明确等待数据加载完成：

修改ModelList.js：

export default function(vm) {
  // 返回一个Promise，等待异步请求完成后再返回数据
  return new Promise(async (resolve) => {
    const data = await crud('model').list()
    resolve({
      // ...你的其他属性
      tableList: data
    })
  })
}

修改Model.vue，在生命周期中等待Promise并将数据存入响应式data：

<template>
  <!-- 用v-if确保数据加载完成后再渲染Table -->
  <Table v-if="tableData" :tableList="tableData.tableList" />
</template>
<script>
import modelList from '../../meta/modelList'
export default {
  components: { Table },
  data() {
    return {
      tableData: null
    }
  },
  async mounted() {
    // 等待异步数据返回
    this.tableData = await modelList(this)
  }
}
</script>

方案2：让ModelList返回响应式对象（Vue3适用） #

利用Vue3的响应式API，让数据变化能被Vue自动感知：

修改ModelList.js：

import { reactive } from 'vue'

export default function(vm) {
  // 创建响应式状态对象
  const state = reactive({
    // ...你的其他属性
    tableList: []
  })

  const getList = async () => {
    const data = await crud('model').list()
    // 直接修改响应式对象的属性，Vue会自动感知变化
    state.tableList = data
  }
  getList()

  return state
}

Model.vue无需大幅修改，直接使用返回的响应式对象即可：

<template>
  <Table :tableList="tableList.tableList" />
</template>
<script>
import modelList from '../../meta/modelList'
export default {
  components: { Table },
  computed: {
    tableList () {
      return modelList(this)
    }
  }
}
</script>

方案3：直接在Vue组件中处理异步请求（推荐） #

这是更符合Vue开发实践的方式，把数据请求逻辑放到组件内部，让组件自己管理响应式数据：

修改Model.vue：

<template>
  <Table :tableList="tableList" />
</template>
<script>
// 直接导入crud工具
import { crud } from '你的crud路径'
export default {
  components: { Table },
  data() {
    return {
      tableList: []
    }
  },
  async mounted() {
    // 在组件挂载后发起异步请求，直接赋值给响应式数据
    this.tableList = await crud('model').list()
  }
}
</script>

这种方式去掉了中间层的封装，逻辑更清晰，也天然符合Vue的响应式机制。

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