Suspense示例

解释说明

1. 模拟异步请求数据：2s获取到数据

<template>
    获取的用户信息：<br>
    userID:{{id}}<br>
    userName:{{name}}<br>
</template>
<script>
const query = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ id: 111, name: "zhihu" });
    }, 2000);
  });
};
export default {
  name: "AsyncTest",
  async setup() {
    let { id, name } = await query();
    return {
      id,
      name,
    };
  },
};
</script>

2. 父组件导入子组件：

<script>
import AsyncTest from './AsyncTest.vue'
export default {
  components:{AsyncTest}
}
</script>

3. suspense在异步请求数据载入的2s中进行过渡显示loading：

<Suspense>
  <template #default>
      <AsyncTest></AsyncTest>
  </template>
  <template #fallback>Loading......</template>
</Suspense>

使用实例

1. loading.io网站搜索合适的载入等待
2. （付费的）右键检查元素，Edit as html，复制后单独成组件Loading.vue
3. Home组件中导入子组件

 import Loading from '../components/Loading.vue'

4. 模板使用suspense

    <suspense>
        <template #fallback>
            <Loading></Loading>
        </template>
        <template #default>
            <HomeCom></HomeCom>
        </template>
    </suspense>

实现异步请求等待过程的载入等待效果。