Nuxt 3中如何监听useAsyncData的pending状态？

你在watch回调里注册onMounted钩子的方式完全错误：

• onMounted是Vue的生命周期钩子，它只能在组件初始化的setup阶段被注册，并且只会在组件挂载完成时触发一次。
• 当watch检测到pending变为false时，组件早已完成挂载流程，此时再注册onMounted，这个钩子永远不会被触发。

直接在watch的回调中执行目标逻辑，不需要嵌套onMounted：

const { data: initialState, pending } = await useAsyncData('budgetInitialState', async () => {
    const initialState = await getInitialState()
    return initialState
})

watch(() => pending, async (newPending) => {
    if (!newPending) {
        // 直接执行你原本想放在onMounted里的代码
        console.log('数据加载完成，现在执行逻辑')
        // 这里可以放置异步操作或其他业务代码
    }
})

如果你的逻辑需要确保DOM已就绪（比如操作页面元素），可以结合nextTick来保证DOM更新完成：

import { nextTick } from 'vue'

const { data: initialState, pending } = await useAsyncData('budgetInitialState', async () => {
    const initialState = await getInitialState()
    return initialState
})

watch(() => pending, async (newPending) => {
    if (!newPending) {
        await nextTick()
        console.log('数据加载完成且DOM已更新')
        // 执行DOM相关操作
    }
})

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