学习Vue3 defineAsyncComponent Api

1. defineAsyncComponent 是什么？
2. 使用 defineAsyncComponent 异步加载 Popup 组件
3. 如何与异步的 setup 方法一起使用？
4. 总结

使用 Vue3 的 DefileAsyncComponent功能可让我们懒加载组件，说白了就是创建一个只有在需要时才会加载的异步组件。

这是改进初始页面加载的好方法，因为我们的应用程序将加载到较小的块中而不是必须在页面加载时加载每个组件。

默认情况下，我们使用defineAsyncComponent定义的所有组件都是可Suspense的。

这意味着如果一个组件的父链中有 Suspense，它将被视为该 Suspense 的一个异步依赖。我们的组件的加载、错误、延迟和超时选项将被忽略，而是由 Suspense 来处理。

总结

当构建包许多组件的大型项目时，defineAsyncComponent是非常有用的。当我们使用懒加载组件时，可以更快地加载页面，改善用户体验，最终提高应用的留存率和转换率。