在 Vue 3 应用中，如何利用 `Suspense` 组件和 `lazy` 加载，设计一个具有良好用户体验的异步组件加载方案？

诸位观众老爷们，大家好！欢迎来到 Vue 3 异步组件加载优化小课堂。今天咱们就聊聊如何用 Suspense 和 lazy 这俩好兄弟，打造一个让用户体验飞升的异步组件加载方案。准备好了吗？发车啦！

一、异步组件加载的必要性：别让你的网页“卡成翔”

想象一下，如果一个网页加载速度慢得像蜗牛爬，用户的心情大概率是这样的：

内心OS： "这啥玩意儿？怎么还没出来？我的流量啊！"
实际操作： 直接关掉页面，去刷抖音了。

所以，优化网页加载速度至关重要。而异步组件加载就是其中的一个利器。它可以把一些不常用的组件（比如弹窗、内容很多的区块）延迟加载，从而减少初始加载时间，让用户更快看到核心内容，避免“卡成翔”的尴尬局面。

二、Vue 3 的 lazy 加载：组件也能“睡懒觉”

Vue 3 提供了 defineAsyncComponent 方法，让我们轻松实现组件的懒加载。这个方法可以接受一个返回 Promise 的函数，Promise resolve 的结果就是我们要加载的组件。

简单来说，就是让组件“睡懒觉”，只有在需要的时候才会被“叫醒”加载。

代码示例：

<template>
  <div>
    <p>我是主组件</p>
    <LazyComponent />
  </div>
</template>

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

const LazyComponent = defineAsyncComponent(() => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        template: '<div>我是懒加载组件，我终于醒了！</div>',
      });
    }, 2000); // 模拟延迟加载
  });
});

export default {
  components: {
    LazyComponent,
  },
};
</script>

代码解释：

defineAsyncComponent：声明一个异步组件。
() => { ... }：一个返回 Promise 的函数，这个函数负责加载组件。
setTimeout：模拟一个 2 秒的延迟加载，实际项目中可以替换成网络请求。
resolve({ template: ... })：Promise resolve 的结果是组件的定义。

效果：

刚打开页面时，LazyComponent 并不会立即加载。只有在它需要被渲染的时候，才会开始加载，并显示“我是懒加载组件，我终于醒了！”。

三、Suspense 组件：优雅地处理异步加载的“等待期”

光有 lazy 加载还不够，在组件加载的过程中，页面会有一段“空白期”，用户可能会觉得页面卡住了。为了提升用户体验，我们需要一个“缓冲器”，也就是 Suspense 组件。

Suspense 组件可以让我们在异步组件加载时，显示一个“占位符”，比如 loading 动画、提示信息等。当异步组件加载完成后，再替换掉占位符。

代码示例：

<template>
  <div>
    <p>我是主组件</p>
    <Suspense>
      <template #default>
        <LazyComponent />
      </template>
      <template #fallback>
        <div>Loading...请稍候</div>
      </template>
    </Suspense>
  </div>
</template>

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

const LazyComponent = defineAsyncComponent(() => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        template: '<div>我是懒加载组件，我终于醒了！</div>',
      });
    }, 2000);
  });
});

export default {
  components: {
    LazyComponent,
  },
};
</script>

代码解释：

Suspense：包裹异步组件。
#default：默认插槽，用于放置异步组件。
#fallback：备用插槽，用于放置占位符，在异步组件加载期间显示。

效果：

在 LazyComponent 加载期间，页面会显示 "Loading…请稍候"。加载完成后，才会显示 LazyComponent 的内容。

四、进阶：Suspense 的超时处理

如果异步组件加载时间过长，用户可能会失去耐心。我们可以设置一个超时时间，如果超过这个时间还没有加载完成，就显示一个错误提示。

<template>
  <div>
    <p>我是主组件</p>
    <Suspense :timeout="1000">
      <template #default>
        <LazyComponent />
      </template>
      <template #fallback>
        <div>Loading...请稍候</div>
      </template>
    </Suspense>
  </div>
</template>

代码解释：

:timeout="1000"：设置超时时间为 1000 毫秒。

效果：

如果 LazyComponent 在 1 秒内没有加载完成，Suspense 会触发 fallback 插槽，显示 "Loading…请稍候"。虽然这里例子还是显示loading，但实际你可以根据需求显示错误信息。

五、更灵活的加载指示器：传递 Props 给 Fallback 组件

有时候，我们希望根据不同的组件，显示不同的加载指示器。比如，加载图片的时候显示图片加载动画，加载表格的时候显示表格加载动画。

我们可以创建一个单独的 Fallback 组件，并通过 Props 将信息传递给它。

Fallback 组件 (LoadingIndicator.vue):

<template>
  <div>
    <p>Loading... {{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: '正在加载...',
    },
  },
};
</script>

使用 Suspense：

<template>
  <div>
    <p>我是主组件</p>
    <Suspense>
      <template #default>
        <LazyComponent />
      </template>
      <template #fallback>
        <LoadingIndicator :message="loadingMessage" />
      </template>
    </Suspense>
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue';
import LoadingIndicator from './LoadingIndicator.vue';

const LazyComponent = defineAsyncComponent(() => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        template: '<div>我是懒加载组件，我终于醒了！</div>',
      });
    }, 2000);
  });
});

export default {
  components: {
    LazyComponent,
    LoadingIndicator,
  },
  data() {
    return {
      loadingMessage: '正在加载 LazyComponent...',
    };
  },
};
</script>

六、错误处理：优雅地应对加载失败的情况

万一异步组件加载失败了怎么办？总不能让用户一直等着吧。我们可以利用 defineAsyncComponent 的 onError 选项来处理错误。

<template>
  <div>
    <p>我是主组件</p>
    <Suspense>
      <template #default>
        <LazyComponent />
      </template>
      <template #fallback>
        <div>Loading...请稍候</div>
      </template>
    </Suspense>
  </div>
</template>

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

const LazyComponent = defineAsyncComponent({
  loader: () => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        // 模拟加载失败
        reject(new Error('加载失败'));
      }, 2000);
    });
  },
  onError(error, retry, fail, attempts) {
    console.error(error);
    if (attempts <= 3) {
      // 尝试重试
      console.log('尝试重试...');
      retry();
    } else {
      // 加载失败
      console.log('加载失败，显示错误信息');
      fail(); // 停止重试，触发 fallback 内容
    }
  },
});

export default {
  components: {
    LazyComponent,
  },
};
</script>

代码解释：

loader：一个返回 Promise 的函数，负责加载组件。
onError：一个错误处理函数，接收四个参数：
- error：错误对象。
- retry：一个函数，用于重新尝试加载组件。
- fail：一个函数，用于指示加载失败，触发 fallback 插槽。
- attempts：尝试加载的次数。

七、更高级的用法：配合 keep-alive

如果你的异步组件需要在不同的页面之间切换，可以使用 keep-alive 组件来缓存组件的状态，避免重复加载。

<template>
  <div>
    <p>我是主组件</p>
    <keep-alive>
      <Suspense>
        <template #default>
          <LazyComponent />
        </template>
        <template #fallback>
          <div>Loading...请稍候</div>
        </template>
      </Suspense>
    </keep-alive>
  </div>
</template>

注意：

keep-alive 只能缓存 Suspense 的默认插槽中的组件。
如果你的异步组件有多个实例，keep-alive 可能会导致一些问题。

八、总结：让你的 Vue 3 应用起飞

通过 lazy 加载和 Suspense 组件的配合，我们可以实现一个优雅的异步组件加载方案，提升用户体验，让你的 Vue 3 应用起飞！

核心技巧总结：

技术点	说明	代码示例
`defineAsyncComponent`	定义异步组件，实现懒加载。	`const LazyComponent = defineAsyncComponent(() => { ... });`
`Suspense`	包裹异步组件，提供加载期间的占位符。	`<Suspense><template #default><LazyComponent /></template><template #fallback><div>Loading...</div></template></Suspense>`
`timeout`	设置 `Suspense` 的超时时间，避免长时间等待。	`<Suspense :timeout="1000">...</Suspense>`
`onError`	处理异步组件加载失败的情况，可以重试或显示错误信息。	`defineAsyncComponent({ loader: () => { ... }, onError(error, retry, fail, attempts) { ... } });`
`keep-alive`	缓存异步组件的状态，避免重复加载。	`<keep-alive><Suspense>...</Suspense></keep-alive>`
传递Props给Fallback	自定义Fallback组件，通过props 传递加载信息	`<template #fallback> <LoadingIndicator :message="loadingMessage" /> </template>`

最后，送大家一句鸡汤：

代码就像艺术品，需要不断打磨才能焕发出光彩。希望大家都能写出优雅、高效的 Vue 3 代码！

这次的讲座就到这里，谢谢大家！下课！

发表回复 取消回复

发表回复取消回复