vue3 先获取数据在加载页面

在 Vue 3 中，你可以在组件的 `setup` 函数中使用 `async/await` 或者 `Promise` 来获取数据，然后在实例化 Vue 应用程序之前完成数据加载。下面是一个简单的示例：

import { createApp } from 'vue'
import App from './App.vue'

const fetchData = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos')
  const data = await response.json()
  return data
}

(async () => {
  const data = await fetchData()
  const app = createApp(App, {
    data: () => ({ todos: data })
  })

  app.mount('#app')
})()

在上面的示例中，我们使用 `fetchData` 函数来获取待显示的数据。然后，我们在一个自执行的 `async` 函数中使用 `await` 来等待数据加载完成，然后在实例化 Vue 应用程序之前，将数据传递给 `createApp` 函数的选项对象中的 `data` 函数。最后，我们使用 `app.mount` 方法将应用程序实例挂载到 DOM 中。

希望这个示例能够帮助你理解如何在 Vue 3 中先获取数据再加载页面。