在 Vue 3 中，处理懒加载的方式与 Vue 2 中有所不同。Vue 3 推荐使用 Suspense 和 defineAsyncComponent 来实现组件的懒加载。
Suspense 组件是 Vue 3 中新增的组件，用于处理异步组件的加载状态。我们可以在 Suspense 中使用 fallback 属性指定一个加载中的占位符，直到异步组件加载完成后再显示真正的内容。
defineAsyncComponent 是 Vue 3 中定义异步组件的新方法。它返回一个 Promise 对象，该 Promise 对象在组件被请求之前解析为一个组件选项对象，从而实现异步组件的加载。
下面是一个使用 Suspense 和 defineAsyncComponent 实现组件懒加载的示例：
Copy Code<template> <div> <h1>Lazy Component Demo</h1> <Suspense> <template #default> <AsyncComponent /> </template> <template #fallback> <p>Loading...</p> </template> </Suspense> </div> </template> <script> import { defineAsyncComponent } from 'vue'; const AsyncComponent = defineAsyncComponent({ loader: () => import('./AsyncComponent.vue'), delay: 200, //延迟时间 timeout: 3000, //超时时间 errorComponent: () => 'Oops, something went wrong!', loadingComponent: () => 'Loading component...', }); export default { components: { AsyncComponent, }, }; </script>
