《Vue.js设计与实现》笔记 第13章：异步组件与函数式组件

Vue.js设计与实现 第13章：异步组件与函数式组件

本章导读

上一章已经实现：

组件实例

props

setup

render

组件更新

组件已经可以正常工作。

但实际项目中还会遇到：

组件体积太大

↓

首屏加载慢

例如：

图表组件

富文本编辑器

代码编辑器

后台管理页面

这些组件通常不会在首次进入页面时立即使用。

因此：

需要按需加载

Vue提供：

defineAsyncComponent()

实现：

异步组件

同时：

Vue还提供：

函数式组件

用于：

轻量级组件

一、什么是异步组件

普通组件

import UserPanel from './UserPanel.vue'

问题：

打包后立即加载

即使：

用户永远不会访问

也会下载。

异步组件

const AsyncComp =
 defineAsyncComponent(
   () => import('./UserPanel.vue')
 )

特点：

需要时才加载

二、异步组件的意义

优化首屏加载

例如：

首页

↓

用户中心

↓

设置页面

首次访问首页：

无需加载

用户中心

设置页面

减少：

JS体积

提升：

首屏速度

三、defineAsyncComponent

Vue提供：

defineAsyncComponent()

基本形式：

const AsyncComp =
 defineAsyncComponent(
   () =>
     import('./Comp.vue')
 )

本质：

返回一个包装组件

四、Loader函数

Loader

例如：

() => import('./Comp.vue')

作用：

返回Promise

结果：

Promise<Component>

五、异步组件实现思路

包装组件：

先显示加载状态

↓

等待Promise

↓

加载完成

↓

渲染真实组件

流程：

AsyncComponent

↓

Loading

↓

Promise Resolve

↓

真实组件

六、异步状态管理

需要保存：

是否加载完成

是否加载失败

是否正在加载

例如：

const loaded = ref(false)

const loading = ref(true)

const error = ref(null)

七、组件加载成功

Promise成功

loader()
 .then(comp=>{
   InnerComp = comp
 })

更新：

loaded.value = true

然后：

重新渲染

显示：

真实组件

八、组件加载失败

Promise失败

.catch(err=>{
  error.value = err
})

状态：

Error

显示：

错误组件

九、Loading组件

配置

defineAsyncComponent({

 loader,

 loadingComponent

})

例如：

<Loading />

显示：

加载中...

十、Error组件

配置

defineAsyncComponent({

 loader,

 errorComponent

})

例如：

<Error />

加载失败：

显示错误界面

十一、延迟显示Loading

问题

网络很快：

几十毫秒加载完成

如果立即显示：

Loading闪烁

体验差。

解决：

delay:200

表示：

200ms后才显示Loading

十二、超时处理

配置

timeout:3000

表示：

3秒仍未完成

自动：

进入Error状态

十三、重试机制

网络失败

例如：

服务器异常

网络抖动

Vue提供：

onError()

示例：

onError(
 retry,
 fail,
 retries
){
}

十四、重试流程

retry()

作用：

重新执行loader

例如：

if(retries < 3){

 retry()

}

超过次数：

fail()

十五、异步组件完整流程

创建组件

↓

执行loader

↓

Promise

↓

成功？

成功：

真实组件

失败：

Error组件

等待：

Loading组件

十六、什么是函数式组件

普通组件

const MyComp = {

 props:{},

 data(){},

 render(){}

}

需要：

组件实例

十七、函数式组件

形式：

function MyComp(props){

 return {
   type:'div',
   children:props.title
 }

}

特点：

没有实例

十八、函数式组件特点

没有：

data

state

生命周期

this

只有：

props

十九、函数式组件优点

更轻量

普通组件：

创建实例

函数式组件：

直接执行函数

成本更低。

更简单

例如：

const Button = props=>{

 return h(
   'button',
   props.text
 )

}

非常适合：

展示型组件

二十、函数式组件渲染流程

普通组件

创建实例

↓

render

↓

VNode

函数式组件

执行函数

↓

VNode

少了一层：

组件实例

二十一、函数式组件Props

定义

MyComp.props = {
 title:String
}

调用：

<MyComp
 title="Vue"
/>

函数参数：

props.title

二十二、函数式组件上下文

Vue提供：

(props,context)

context：

attrs

slots

emit

例如：

function MyComp(
 props,
 {slots}
){

}

二十三、函数式组件与普通组件区别

项目 普通组件 函数式组件
实例 有 无
data 支持 不支持
生命周期 支持 不支持
this 有 无
setup 支持 不支持
性能 略低 更轻量
场景 复杂业务 展示组件

二十四、组件分类

Vue组件：

普通组件

↓

异步组件

↓

函数式组件

本质：

最终都返回VNode

第13章核心知识图谱

Component

│

├── 普通组件

│     ├── state
│     ├── setup
│     └── render

│

├── 异步组件

│     ├── loader
│     ├── loading
│     ├── error
│     ├── retry
│     └── timeout

│

└── 函数式组件

      ├── props
      ├── context
      └── VNode

高频面试题

什么是异步组件？

按需加载组件

defineAsyncComponent作用？

创建异步组件

loader是什么？

返回Promise的函数

Loading组件作用？

加载过程中显示

Error组件作用？

加载失败时显示

timeout作用？

超时后进入错误状态

什么是函数式组件？

没有组件实例的组件

函数式组件有什么特点？

无状态

无生命周期

无this

函数式组件优势？

更轻量

性能更好

Vue组件最终本质是什么？

返回VNode

本章总结

异步组件：

defineAsyncComponent

↓

loader

↓

Promise

↓

Loading

↓

真实组件

↓

Error

作用：

按需加载

优化首屏性能

函数式组件：

props

↓

函数执行

↓

VNode

特点：

无实例

无状态

无生命周期

适用于：

简单展示组件

本章核心掌握：

  1. defineAsyncComponent
  2. loader
  3. Loading组件
  4. Error组件
  5. timeout
  6. retry
  7. 函数式组件
  8. 普通组件与函数式组件区别

这是 Vue 高级组件能力的重要组成部分。

posted @ 2025-06-11 16:17  Li_pk  阅读(4)  评论(0)    收藏  举报