第13章、异步组件与函数式组件
13.1 异步组件要解决的问题
用户可以简单通过 import
异步导入组件。
<template>
<component :is="asyncComp">
</template>
<script>
export default {
setup() {
const asyncComp = shallowRef(null)
import ('CompB.vue').then(CompB => asyncComp.value = CompB)
}
}
</script>
但我们还需要考虑组件加载失败,Loading 显示,失败重试等问题。
13.2 异步组件的实现原理
卸载函数增加卸载组件的逻辑
function unmount(vnode) {
if (vnode.type === Fragment) {
vnode.children.forEach((c) => unmount(c))
return
} else if (typeof vnode.type === 'object') {
unmount(vnode.component.subTree)
return
}
const parent = vnode.el.parentNode
if (parent) {
parent.removeChild(vnode.el)
}
}
在异步组件增加完善的逻辑,具体含义见代码注释。
function defineAsyncComponent(options) {
if (typeof options === 'function') {
options = {
loader: options,
}
}
const { loader } = options
let InnerComp = null
let retries = 0
function load() {
return loader().catch((err) => {
if (options.onError) {
// 函数返回Promise 并让用户在retry中调用resolve
// 这样用户retry之后 通过load().then() 可以获取组件值
// 即使又失败 就是又返回一个Promise 对象 还是要获取Promise中resolve的值
// 所以这样可以多次调用retry
return new Promise((resolve, reject) => {
const retry = () => {
resolve(load())
retries++
}
const fail = () => reject(err)
options.onError(retry, fail, retries)
})
} else {
throw err
}
})
}
return {
name: 'AsyncComponentWrapper',
setup() {
const loaded = ref(false)
const error = shallowRef(null)
const loading = ref(false)
const loadingTimer = null
if (options.delay) {
// 设置options.delay的话,在options.delay时间之后再把loading设置为true,
// 防止组件加载比较快的情况下出现loading一闪而过导致用户体验差
loadingTimer = setTimeout(() => {
loading.value = true
}, options.delay)
} else {
loading.value = true
}
load() // 使用load函数加载组件
.then((c) => {
InnerComp = c
loaded.value = true
})
// 记录错误
.catch((err) => (error.value = err))
// 加载后设置加载成功 loading为false
.finally(() => {
loading.value = false
clearTimeout(loadingTimer)
})
let timer = null
if (options.timeout) {
timer = setTimeout(() => {
const err = new Error('异步组件加载超时')
error.value = err
}, options.timeout)
}
// 保证组件被卸载时清除定时器
onUmounted(() => clearTimeout(timer))
// 占位内容
const placeholder = { type: Text, children: '占位' }
return () => {
// 加载成功渲染组件 否则渲染占位符
if (loaded.value) {
return { type: InnerComp }
} else if (error.value && options.errorComponent) {
// 存在错误返回error对应组件
return { type: options.errorComponent, props: { error: error.value } }
} else if (loading.value && options.loadingComponent) {
// 加载中返回loading对应组件
return { type: options.loadingComponent }
}
return placeholder
}
},
}
}
13.3 函数式组件
函数式组件本质就是一个普通函数,该函数的返回值是虚拟 DOM。在 Vue3 中函数式组件的性能和普通组件差不多,但是比较简单。
实现也很简单,就是在 patch
新增对函数的支持,同时在组件挂载时,把 type
作为渲染函数。
function patch(n1, n2, container, anchor) {
//...
// 新增了对函数的判断
if (typeof type === 'object' || typeof type === 'function') {
// 组件
if (!n1) {
// 挂载
mountComponent(n2, container, anchor)
} else {
patchComponent(n1, n2, anchor)
}
}
}
function mountComponent(vnode, container, anchor) {
const isFunctional = typeof vnode.type === 'function'
let componentOptions = vnode.type
if (isFunctional) {
componentOptions = {
render: vnode.type,
props: vnode.type.props,
}
}
// ...
}
使用方法:
function MyFuncComp(props) {
return {
type: 'h1',
children: props.title
}
}
MyFuncComp.props = {
title: String
}
const vnode = {
type: MyFuncComp,
props: {
title: '函数式组件'
}
}
标签:13,const,读书笔记,vnode,组件,return,type,options
From: https://www.cnblogs.com/wenruo/p/17099467.html