解讀Vue3中keep-alive和動態(tài)組件的實現(xiàn)邏輯
更新時間：2023年05月20日 15:57:01 作者：JonnyLan
這篇文章主要介紹了Vue3中keep-alive和動態(tài)組件的實現(xiàn)邏輯，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
keep-alive組件是Vue提供的組件，它可以緩存組件實例，在某些情況下避免了組件的掛載和卸載，在某些場景下非常實用。
例如最近我們遇到了一種場景，某個組件上傳較大的文件是個耗時的操作，如果上傳的時候切換到其他頁面內(nèi)容，組件會被卸載，對應的下載也會被取消。此時可以用keep-alive組件包裹這個組件，在切換到其他頁面時該組件仍然可以繼續(xù)上傳文件，切換回來也可以看到上傳進度。
keep-alive
渲染子節(jié)點
const KeepAliveImpl: ComponentOptions = {
name: `KeepAlive`,
setup(props: KeepAliveProps, { slots }: SetupContext) {
// 需要渲染的子樹VNode
let current: VNode | null = null
return () => {
// 獲取子節(jié)點, 由于Keep-alive只能有一個子節(jié)點，直接取第一個子節(jié)點
const children = slots.default()
const rawVNode = children[0]
// 標記 | ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE，這個組件是`keep-alive`組件, 這個標記 不走 unmount邏輯，因為要被緩存的
vnode.shapeFlag |= ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE
// 記錄當前子節(jié)點
current = vnode
// 返回子節(jié)點，代表渲染這個子節(jié)點
return rawVNode
}
}
}組件的setup返回函數(shù),這個函數(shù)就是組件的渲染函數(shù);
keep-alive是一個虛擬節(jié)點不需要渲染，只需要渲染子節(jié)點，所以函數(shù)只需要返回子節(jié)點VNode就行了。
緩存功能
定義存儲緩存數(shù)據(jù)的Map, 所有的緩存鍵值數(shù)組Keys，代表當前子組件的緩存鍵值pendingCacheKey；
const cache = new Map() const keys: Keys = new Set() let pendingCacheKey: CacheKey | null = null
渲染函數(shù)中獲取子樹節(jié)點VNode的key, 緩存cache中查看是否有key對應的緩存節(jié)點
const key = vnode.key const cachedVNode = cache.get(key)
key是生成子節(jié)點的渲染函數(shù)時添加的，一般情況下就是0，1，2，…這些數(shù)字。
記錄下點前的key
pendingCacheKey = key
如果有找到緩存的cachedVNode節(jié)點，將緩存的cachedVNode節(jié)點的組件實例和節(jié)點元素 復制給新的VNode節(jié)點。沒有找到就先將當前子樹節(jié)點VNode的pendingCacheKey加入到Keys中。
if (cachedVNode) {
? // 復制節(jié)點
? vnode.el = cachedVNode.el
? vnode.component = cachedVNode.component
? // 標記 | ShapeFlags.COMPONENT_KEPT_ALIVE，這個組件是復用的`VNode`, 這個標記 不走 mount邏輯
? vnode.shapeFlag |= ShapeFlags.COMPONENT_KEPT_ALIVE
} else {
? // 添加 pendingCacheKey
? keys.add(key)
}- 問題: 這里為什么不實現(xiàn)在cache中存入{pendingCacheKey: vnode}呢？
- 答案: 這里其實可以加入這邏輯，只是官方間隔這個邏輯延后實現(xiàn)了, 我覺得沒什么差別。
在組件掛載onMounted和更新onUpdated的時候添加/更新緩存
onMounted(cacheSubtree)
onUpdated(cacheSubtree)
const cacheSubtree = () => {
? if (pendingCacheKey != null) {
? ? // 添加/更新緩存
? ? cache.set(pendingCacheKey, instance.subTree)
? }
}全部代碼
const KeepAliveImpl: ComponentOptions = {
? name: `KeepAlive`,
? setup(props: KeepAliveProps, { slots }: SetupContext) {
? ? let current: VNode | null = null
? ? // 緩存的一些數(shù)據(jù)
? ? const cache = new Map()
? ? const keys: Keys = new Set()
? ? let pendingCacheKey: CacheKey | null = null
? ? // 更新/添加緩存數(shù)據(jù)
? ? const cacheSubtree = () => {
? ? ? if (pendingCacheKey != null) {
? ? ? ? // 添加/更新緩存
? ? ? ? cache.set(pendingCacheKey, instance.subTree)
? ? ? }
? ? }
? ? // 監(jiān)聽生命周期
? ? onMounted(cacheSubtree)
? ? onUpdated(cacheSubtree)
? ? return () => {
? ? ? const children = slots.default()
? ? ? const rawVNode = children[0]
? ? ? // 獲取緩存
? ? ? const key = rawVNode.key
? ? ? const cachedVNode = cache.get(key)
? ? ? pendingCacheKey = key
? ? ? if (cachedVNode) {
? ? ? ? // 復用DOM和組件實例
? ? ? ? rawVNode.el = cachedVNode.el
? ? ? ? rawVNode.component = cachedVNode.component
? ? ? } else {
? ? ? ? // 添加 pendingCacheKey
? ? ? ? keys.add(key)
? ? ? }
? ? ? rawVNode.shapeFlag |= ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE
? ? ? current = rawVNode
? ? ? return rawVNode
? ? }
? }
}至此，通過cache實現(xiàn)了DOM和組件實例的緩存。
keep-alive的patch復用邏輯
我們知道生成VNode后是進行patch邏輯，生成DOM。
const processComponent = (
? n1: VNode | null,
? n2: VNode,
? container: RendererElement,
? anchor: RendererNode | null,
? parentComponent: ComponentInternalInstance | null,
? parentSuspense: SuspenseBoundary | null,
? isSVG: boolean,
? slotScopeIds: string[] | null,
? optimized: boolean
) => {
? n2.slotScopeIds = slotScopeIds
? if (n1 == null) {
? ? if (n2.shapeFlag & ShapeFlags.COMPONENT_KEPT_ALIVE) {
? ? ? ;(parentComponent!.ctx as KeepAliveContext).activate(
? ? ? ? n2,
? ? ? ? container,
? ? ? ? anchor,
? ? ? ? isSVG,
? ? ? ? optimized
? ? ? )
? ? } else {
? ? ? mountComponent(
? ? ? ? n2,
? ? ? ? container,
? ? ? ? anchor,
? ? ? ? parentComponent,
? ? ? ? parentSuspense,
? ? ? ? isSVG,
? ? ? ? optimized
? ? ? )
? ? }
? }
}processComponent處理組件邏輯的時候如果是復用ShapeFlags.COMPONENT_KEPT_ALIVE則走的父組件keep-alive的activate方法；
const unmount: UnmountFn = (
? vnode,
? parentComponent,
? parentSuspense,
? doRemove = false,
? optimized = false
) => {
? const {
? ? type,
? ? props,
? ? ref,
? ? children,
? ? dynamicChildren,
? ? shapeFlag,
? ? patchFlag,
? ? dirs
? } = vnode
? if (shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE) {
? ? ;(parentComponent!.ctx as KeepAliveContext).deactivate(vnode)
? ? return
? }
}unmount卸載的keep-alive組件ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE時調(diào)用父組件keep-alive的deactivate方法。
總結：keep-alive組件的復用和卸載被activate方法和deactivate方法接管了。
active邏輯
sharedContext.activate = (vnode, container, anchor, isSVG, optimized) => {
? const instance = vnode.component!
? // 1. 直接掛載DOM
? move(vnode, container, anchor, MoveType.ENTER, parentSuspense)
? // 2. 更新prop
? patch(
? ? instance.vnode,
? ? vnode,
? ? container,
? ? anchor,
? ? instance,
? ? parentSuspense,
? ? isSVG,
? ? vnode.slotScopeIds,
? ? optimized
? )
? // 3. 異步執(zhí)行onVnodeMounted 鉤子函數(shù)
? queuePostRenderEffect(() => {
? ? instance.isDeactivated = false
? ? if (instance.a) {
? ? ? invokeArrayFns(instance.a)
? ? }
? ? const vnodeHook = vnode.props && vnode.props.onVnodeMounted
? ? if (vnodeHook) {
? ? ? invokeVNodeHook(vnodeHook, instance.parent, vnode)
? ? }
? }, parentSuspense)
}- 直接掛載DOM
- 更新prop
- 異步執(zhí)行onVnodeMounted鉤子函數(shù)
deactivate邏輯
const storageContainer = createElement('div')
sharedContext.deactivate = (vnode: VNode) => {
? const instance = vnode.component!
? // 1. 把DOM移除，掛載在一個新建的div下
? move(vnode, storageContainer, null, MoveType.LEAVE, parentSuspense)
? // 2. 異步執(zhí)行onVnodeUnmounted鉤子函數(shù)
? queuePostRenderEffect(() => {
? ? if (instance.da) {
? ? ? invokeArrayFns(instance.da)
? ? }
? ? const vnodeHook = vnode.props && vnode.props.onVnodeUnmounted
? ? if (vnodeHook) {
? ? ? invokeVNodeHook(vnodeHook, instance.parent, vnode)
? ? }
? ? instance.isDeactivated = true
? }, parentSuspense)
? if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
? ? // Update components tree
? ? devtoolsComponentAdded(instance)
? }
}- 把DOM移除，掛載在一個新建的div下
- 異步執(zhí)行onVnodeUnmounted鉤子函數(shù)
問題：舊節(jié)點的deactivate和新節(jié)點的active誰先執(zhí)行
答案：舊節(jié)點的deactivate先執(zhí)行，新節(jié)點的active后執(zhí)行。
keep-alive的unmount邏輯
將cache中出當前子樹VNode節(jié)點外的所有卸載，當前組件取消keep-alive的標記, 這樣當前子樹VNode會隨著keep-alive的卸載而卸載。
onBeforeUnmount(() => {
? cache.forEach(cached => {
? ? const { subTree, suspense } = instance
? ? const vnode = getInnerChild(subTree)
? ? if (cached.type === vnode.type) {
? ? ? // 當然組件先取消`keep-alive`的標記，能正在執(zhí)行unmout
? ? ? resetShapeFlag(vnode)
? ? ? // but invoke its deactivated hook here
? ? ? const da = vnode.component!.da
? ? ? da && queuePostRenderEffect(da, suspense)
? ? ? return
? ? }
? ? // 每個緩存的VNode，執(zhí)行unmount方法
? ? unmount(cached)
? })
})
<!-- 執(zhí)行unmount -->
function unmount(vnode: VNode) {
? ? // 取消`keep-alive`的標記，能正在執(zhí)行unmout
? ? resetShapeFlag(vnode)
? ? // unmout
? ? _unmount(vnode, instance, parentSuspense)
}keep-alive卸載了，其緩存的DOM也將被卸載。
keep-alive緩存的配置include,exclude和max
這部分知道邏輯就好了，不做代碼分析。
- 組件名稱在include中的組件會被緩存;
- 組件名稱在exclude中的組件不會被緩存;
- 規(guī)定緩存的最大數(shù)量，如果超過了就把緩存的最前面的內(nèi)容刪除。
動態(tài)組件
使用方法
<keep-alive> ? <component is="A"></component> </keep-alive>
渲染函數(shù)
resolveDynamicComponent("A")resolveDynamicComponent的邏輯
export function resolveDynamicComponent(component: unknown): VNodeTypes {
? if (isString(component)) {
? ? return resolveAsset(COMPONENTS, component, false) || component
? }
}
function resolveAsset(
? type,
? name,
? warnMissing = true,
? maybeSelfReference = false
) {
? const res =
? ? // local registration
? ? // check instance[type] first which is resolved for options API
? ? resolve(instance[type] || Component[type], name) ||
? ? // global registration
? ? resolve(instance.appContext[type], name)
? return res
}和指令一樣，resolveDynamicComponent就是根據(jù)名稱尋找局部或者全局注冊的組件，然后渲染對應的組件。
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue攔截器組件的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
Vue.js 是一個漸進式框架,用于構建用戶界面,在開發(fā)過程中,我們經(jīng)常需要根據(jù)不同的條件動態(tài)顯示組件,在本文中,我將詳細介紹如何實現(xiàn)Vue組件的動態(tài)綁定,提供示例代碼,以幫助你更深入地理解這個概念,需要的朋友可以參考下2024-11-11
在最近一個項目的后臺管理系統(tǒng)中，寫前端界面時用到了ElementUI，但是發(fā)現(xiàn)導入數(shù)據(jù)表格之后表頭的高度一直很高，那么如何解決，本文就來詳細的介紹一下2021-09-09
讓我們來回顧下Vue的介紹,可以發(fā)現(xiàn)Vue 最顯著的一個功能是響應系統(tǒng)。那么它的實現(xiàn)原理有又是如何呢?下面小編和大家來一起學習一下2019-05-05
vue el-switch綁定數(shù)值時需要注意的問題
在Vue中使用`el-switch`組件時,綁定數(shù)值類型時應使用布爾值（true/false）,而綁定字符串類型時應使用字符串（'true'/'false'）2024-12-12
這篇文章主要為大家詳細介紹了Vue實現(xiàn)點擊時間獲取時間段查詢功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-04-04
這篇文章主要給大家介紹了關于vue watch監(jiān)控對象的簡單方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
解決webpack+Vue引入iView找不到字體文件的問題
今天小編就為大家分享一篇解決webpack+Vue引入iView找不到字體文件的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了記一次Vue.js混入mixin的使用(分權限管理頁面)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
本文主要介紹了vue3?解決數(shù)據(jù)更新而視圖未更新問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-10-10