跟着官网学 Vue - 异步组件

- 日理万妓 2024-02-05 16:13 19阅读 0赞

##### ParentComponent.vue #####

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

<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秒后的内容！”。

<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秒后的内容！”。