Vue 3 加载骨架不工作的悬念

Question

我正在编写一个 Vue 3 应用程序，我正在使用 Suspense。它没有像我预期的那样工作，所以我找到了一个可以实现我想要的功能的codepen：https://codepen.io/ajithranka/pen/RwjBJbr

所以，我导出它并在本地运行它就很好了。接下来，我创建了一个标准的 Vue 应用程序：

 npm create vite@latest loading-app -- --template vue

然后，我创建了 Vue 组件和视图，当我运行新应用程序时，我得到：

我知道该错误意味着什么，但不知道为什么会发生。即使当我检查数据变量是否不为空时，骨架也不会出现。

我使用从 codepen 创建的内容创建了一个公共 github (https://github.com/troycomp/loading-app) 项目。有人能告诉我为什么骷髅不像例子中那样出现吗？

谢谢

Answer 1

根据 Vue 文档：

<Suspense>

可以等待两种类型的异步依赖项：

1. 具有异步 setup() 挂钩的组件。这包括使用

   <script setup>

   和 顶级等待表达式的组件。

2. 异步组件。

在您的 github 代码中，在 SuspendableComponent.vue 中，您正在 onMounted 挂钩中进行获取

onMounted(async () => {
  data.value = await fetchData({
    dataIndex: props.dataIndex,
    delay: props.delay,
    throwError: props.throwError,
  });
});

这不被视为顶级代码，因此

<Suspense>

不会等待它。要成为顶级，应该将 fetch 移到 onMounted 之外。

data.value = await fetchData({
  dataIndex: props.dataIndex,
  delay: props.delay,
  throwError: props.throwError,
});