跟着官网学 Vue - 异步组件

ParentComponent.vue

• 模板部分包含一个<h1>标题和一个<Suspense>组件。
• <Suspense>组件是Vue 3中用于处理异步组件加载的组件。它允许你在异步组件加载时显示一些占位内容（fallback），直到异步组件准备好渲染。
• 在<Suspense>的默认插槽中，使用了<AsyncComponent />，这是一个异步组件，它会根据异步加载的状态显示不同的内容。

<!-- ParentComponent.vue -->
<template>
  <div>
    <h1>父组件</h1>
    <Suspense>
      <template #default>
        <AsyncComponent />
      </template>
    </Suspense>
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue';

// 异步加载组件
const AsyncComponent = defineAsyncComponent({
  loader: () => import('./AsyncComponent.vue'),

  // 加载失败时显示的组件
  errorComponent: {
    template: '<p>错误！组件加载失败。</p>'
  },

  // 超时时间
  timeout: 6000 // 6 seconds
});

export default {
  components: {
    AsyncComponent
  },

};
</script>

AsyncComponent.vue

• 模板部分包含了两个<p>标签，一个用于显示"加载…"，另一个用于显示异步加载的组件内容。
• 使用了v-if和v-else指令，根据isLoaded的值来切换显示的内容。
• data函数中定义了isLoaded和message两个数据属性，其中isLoaded用于表示异步组件是否加载完成，message用于存储异步加载的内容。
• mounted生命周期钩子中使用setTimeout模拟异步加载的延迟。首先在2秒后将isLoaded设置为true，并将message设置为"这是异步加载的组件内容！“，然后在另外5秒后再次将message设置为"延迟5秒后的内容！”。

<!-- AsyncComponent.vue -->
<template>
  <div>
    <p v-if="!isLoaded">加载...</p>
    <p v-else>异步加载的组件: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoaded: false,
      message: ''
    };
  },
  // 模拟异步加载延迟
  mounted() {
    setTimeout(() => {
      this.isLoaded = true;
      this.message = '这是异步加载的组件内容！';
    }, 2000);
    setTimeout(() => {
      this.message = '延迟5秒后的内容！';
    }, 5000);
  }
};
</script>

这个代码的执行流程如下：

1. ParentComponent.vue组件渲染，显示父组件的标题。
2. <Suspense>组件检测到内部存在异步组件<AsyncComponent />，开始异步加载。
3. 在异步加载期间，<Suspense>会显示fallback，即"加载…"。
4. 异步加载完成后，<AsyncComponent />组件会根据isLoaded的值，切换显示加载的内容。

最终效果是：2秒后显示"这是异步加载的组件内容！“，再过3秒后更新为"延迟5秒后的内容！”。