[Vue3]：异步非阻塞组件渲染，使得渲染视图（页面 DOM）先于视图模型

Question

我有一个包含许多组件的 SPA，其中一些组件包含很长的任务（~ 6 秒）。在应用程序中导航时，它看起来像是挂起的（因为任务很长）。为了解决这个问题，我使用了异步组件。然而，没有什么区别，结果和以前一样。另外，尝试了脚本设置来提高性能，但它也不起作用。

问题

在包含长任务的组件中，

View(DOM)

和

View Model(Data)

同时加载。而且 SPA 看起来挂在导航中

我在寻找什么

加载查看+无数据（页面皮肤）。然后，当数据准备好时，将数据（视图模型）推送到视图中。

代码

await init()

大约需要 6 秒才能完成。不过，我执行它

onMounted

它会阻塞视图，直到它完成，并且视图和数据都会同时加载。

<script setup>
// ...
onMounted(async () => {
  console.log('overview component mounted')
  await init()
  isMounted = true
})
</script>

Answer 1

如果你想让 UI 响应式，如果你的任务操作 DOM，则没有办法改进，你应该缩短任务，例如，不要操作 DOM，编写纯 HTML 并立即插入。如果你进行长时间的计算，那么使用 Workers 可以大大改善。

但是，如果您希望渲染组件，然后执行较长的任务（挂起 UI），您应该使用

setTimeout()

来允许浏览器渲染组件。

async/await

使用在当前宏任务结束时、浏览器重新渲染页面之前执行的微任务。

您可以在这里阅读有关微任务的信息：

https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide/In_depth

<script setup>
// ...
onMounted(() => {
  console.log('overview component mounted')
  setTimeout(() => {
    init();
    isMounted = true
  });
  
})
</script>