vue3中组合式api的执行顺序问题

// Composition API (Vue 3)
export default {
  async setup() {
    console.log('1. 开始 setup')

    const { data } = await useFetch('/api/products')
    console.log('2. 数据加载完成')
    // 👇 注册 onMounted 钩子（注意：只是注册，不是执行）
    onMounted(() => {
      console.log('4. mounted 执行，数据已就绪')
    })

    console.log('3. setup 结束')
  }
}

输出：

1. 开始 setup
2. 数据加载完成
3. setup 结束
4. mounted 执行

🧠 原理总结:

await 会阻塞 setup() 函数的执行，直到 Promise 完成。
onMounted(() => {...}) 只是注册一个回调函数，它不会立即执行。
Vue 的生命周期规定：onMounted 的回调，只有在：

1. setup() 执行完毕 ✅
2. 组件渲染并挂载到 DOM 后 ✅ 才会调用。
   所以，onMounted 回调的执行，天然地“序列化”在 setup() 的所有异步操作之后