第 13 章异步组件与函数式组件

霍春阳（HcySunYang）

在第 12 章中，我们详细讨论了组件的基本含义与实现。本章，我们将继续讨论组件的两个重要概念，即异步组件和函数式组件。在异步组件中，“异步”二字指的是，以异步的方式加载并渲染一个组件。这在代码分割、服务端下发组件等场景中尤为重要。而函数式组件允许使用一个普通函数定义组件，并使用该函数的返回值作为组件要渲染的内容。函数式组件的特点是：无状态、编写简单且直观。在 Vue.js 2 中，相比有状态组件来说，函数式组件具有明显的性能优势。但在 Vue.js 3 中，函数式组件与有状态组件的性能差距不大，都非常好。正如 Vue.js RFC 的原文所述：“在 Vue.js 3 中使用函数式组件，主要是因为它的简单性，而不是因为它的性能好。”
13.1　异步组件要解决的问题从根本上来说，异步组件的实现不需要任何框架层面的支持，用户完全可以自行实现。渲染 App 组件到页面的示例如下：
 import App from 'App.vue'
 createApp(App).mount('#app')
上面这段代码所展示的就是同步渲染。我们可以轻易地将其修改为异步渲染，如下面的代码所示：
 const loader = () => import('App.vue')
 loader().then(App => {
   createApp(App).mount('#app')
 })
这里我们使用动态导入语句 import() 来加载组件，它会返回一个 Promise 实例。组件加载成功后，会调用 createApp 函数完成挂载，这样就实现了以异步的方式来渲染页面。
上面的例子实现了整个页面的异步渲染。通常一个页面会由多个组件构成，每个组件负责渲染页面的一部分。那么，如果只想异步渲染部分页面，要怎么办呢？这时，只需要有能力异步加载某一个组件就可以了。假设下面的代码是 App.vue 组件的代码：

公开

同步至部落

取消

完成

0/2000

荧光笔

直线

曲线

笔记

复制

AI

深入了解
翻译
英语
中文简体
中文繁体
法语
德语
日语
韩语
俄语
西班牙语
阿拉伯语
解释
总结

本文深入介绍了 Vue.js 中异步组件与函数式组件的概念和实现方式。异步组件通过异步加载和渲染解决了代码分割和服务端下发组件等重要问题，而函数式组件则以无状态、简单直观和性能优势等特点脱颖而出。文章详细介绍了异步组件的实现原理，包括封装 defineAsyncComponent 函数、超时与 Error 组件的设计和实现。此外，还讨论了延迟与 Loading 组件的展示以及重试机制的实现。通过具体的代码示例和技术原理，本文帮助读者深入理解了 Vue.js 组件化开发的重要性和实现方式。在异步组件方面，文章提到了解决加载超时、错误处理、Loading 组件展示和重试机制等问题，并介绍了 Vue.js 3 中提供的 defineAsyncComponent 函数来定义异步组件。另外，函数式组件的实现也得到了详细讨论，强调了其简单性和性能优势。通过对挂载函数式组件的逻辑进行复用，实现了对函数式组件的兼容。总的来说，本文通过深入讨论异步组件和函数式组件的实现原理和应用场景，为读者提供了全面的技术视角，帮助他们更好地理解 Vue.js 组件化开发的重要性和实现方式。

仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《Vue.js 设计与实现》

立即购买

登录后留言

精选留言

由作者筛选后的优质留言将会公开显示，欢迎踊跃留言。

收起评论

第 13 章 异步组件与函数式组件

13.1 异步组件要解决的问题

精选留言

第 13 章异步组件与函数式组件

13.1　异步组件要解决的问题