Vue组件onMounted异步加载数据前setup已返回结果如何解决？

根因说明 #

问题核心来自两个错误用法：

• reactive创建的是响应式代理对象，直接对变量整体赋值（courseDetail = response.data.courses）会替换掉原来的响应式代理，丢失响应式关联
• setup函数是同步执行的，异步接口请求天然晚于setup执行完成，不可能等待接口返回后再返回数据，需要依赖Vue的响应式机制自动更新视图

修复方法 #

推荐优先使用ref声明需要整体替换的数组/基础类型变量，修改时更新.value即可保留响应式：

import { defineComponent, ref, onMounted } from 'vue'

export default defineComponent({
  props: {
    courseId: {
      type: String
    }
  },
  setup(props) {
    // 用ref声明需要整体替换的响应式变量
    const courseDetail = ref([])
    const sections = ref([])
    // 可选：添加加载状态处理空数据展示
    const loading = ref(true)

    onMounted(() => {
      Course.getSectionAndSubsections("get-section-and-subsections", props.courseId)
        .then(response => {
          // 给ref赋值要修改.value属性
          courseDetail.value = response.data.courses
          sections.value = response.data.sections
          NotificationService.success(response.data.message)
        })
        .catch(err => {
          NotificationService.error(err.response)
        })
        .finally(() => {
          loading.value = false
        })
    })

    return {
      courseDetail,
      sections,
      loading
    }
  }
})

可选：保留reactive的修改方式 #

如果你坚持使用reactive，可以将数据挂载到一个对象的属性上，避免替换整个代理对象：

const state = reactive({
  courseDetail: [],
  sections: []
})

// 赋值时修改对象属性而非替换整个state
state.courseDetail = response.data.courses
state.sections = response.data.sections

模板使用提示 #

• ref返回的变量在模板中使用时不需要加.value，Vue会自动解包
• 可以配合loading状态实现加载动画/占位符，避免接口返回前页面展示异常

<template>
  <div v-if="loading">加载中...</div>
  <div v-else>
    <!-- 渲染courseDetail内容 -->
  </div>
</template>

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