在 onBeforeMount Vue3 中进行异步调用

Question

我尝试在 Vue 3 中的 onBeforeMount() 挂钩中进行异步调用，但看起来组件仍然在 onBeforeMount 回调完全执行之前安装自身。

这是我的代码（一切都在

<script setup>

中）：

// Parent component
const allRequests: Ref<Array<ITaskData>> = ref([])

onBeforeMount(async () => {
    allRequests.value = await Task.getTasks()
})

得到结果后，我将

allRequests

发送到我的子组件，当我在模板中打印它时，它没问题，但是当我想在

onMounted

钩子上使用它时，它是空的。如果我用 setTimeout 打印它，那就很好，并且我可以看到我的数据。 这是代码的一部分：

// Child component
const data: Ref<Array<ITaskData>> = ref([])

const props = defineProps({
    tableData: {
        type: Array,
        required: true,
    },
})
onMounted(() => {
    // Here I get []
    console.log(props.tableData)

    // Here I get the array I passed as a prop in the parent
    setTimeout(() => {
        console.log(props.tableData)
    }, 1000)
    
})

Vue 3 生命周期中有什么我不明白的地方吗？ 我以为我可以在商店中拨打电话，然后从那里访问数据，但我认为商店对于我的应用程序来说有点太多了。

Answer 1

你说得对。 Vue 不会等待您的回调。就我个人而言，我使用一些布尔值来有条件地渲染子组件，并仅在获取所有数据时才切换它。同时显示负载状态也很有用。

// Parent component
const allRequests: Ref<Array<ITaskData>> = ref([])
const initComplte = ref(false)

onBeforeMount(async () => {
    allRequests.value = await Task.getTasks()
    initComplete.value = true
})

父模板会有类似的东西

<template>
  <child-component v-if="initComplete" :data="allrequests" />
  <!--- optional loader  -->
  <loader v-else />
</template>