跟着官网学 Vue - 异步组件

2023-12-19 07:21:01
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-ifv-else指令,根据isLoaded的值来切换显示的内容。
  • data函数中定义了isLoadedmessage两个数据属性,其中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秒后的内容!”。

文章来源:https://blog.csdn.net/qq_43116031/article/details/135048759
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。