欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue3?KeepAlive實(shí)現(xiàn)原理解析

 更新時(shí)間:2022年09月05日 17:04:02   作者:Axin  
KeepAlive?是一個(gè)內(nèi)置組件,那封裝一個(gè)組件對于大家來說應(yīng)該不會(huì)有太大的困難,它的核心邏輯在于它的?render?函數(shù),它用?map?去記錄要緩存的組件,就是?[key,vnode]?的形式,這篇文章主要介紹了Vue3?KeepAlive實(shí)現(xiàn)原理,需要的朋友可以參考下

思路

首先我們知道 KeepAlive 是一個(gè)內(nèi)置組件,那封裝一個(gè)組件對于大家來說應(yīng)該不會(huì)有太大的困難,它的核心邏輯在于它的 render 函數(shù),它用 map 去記錄要緩存的組件,就是 [key,vnode] 的形式。它的核心思想就是 LRU,當(dāng)我們限制有 maxSize 的時(shí)候,超過 maxSize 時(shí)我們會(huì)刪除最久沒有使用的[key, vnode],可以看看 leetcode146.LRU緩存;基本上你理清了 LRU 算法的思路,keepalive 的原理你也知道的差不多了。

代碼解析

我只貼出來能幫助大家理解的核心代碼,源碼位于core/package/runtime-core/src/components/KeepAlive.ts

setup

const cache: Cache = new Map()
const keys: Keys = new Set()
// cache sub tree after render
let pendingCacheKey: CacheKey | null = null
const cacheSubtree = () => {
  // fix #1621, the pendingCacheKey could be 0
  if (pendingCacheKey != null) {
    cache.set(pendingCacheKey, getInnerChild(instance.subTree))
  }
}
// 組件掛載和更新的時(shí)候就會(huì)緩存最新的組件
onMounted(cacheSubtree)
onUpdated(cacheSubtree)

render

tips:這塊邏輯就是 setup 的返回值

  const comp = vnode.type as ConcreteComponent
  const key = vnode.key == null ? comp : vnode.key
  pendingCacheKey = key
  const cachedVNode = cache.get(key)
  
  // tips: keys 僅僅是用于收集組件的 key 組件實(shí)際收集在cache中
  if (cachedVNode) { // 節(jié)點(diǎn)存在緩存中
    // copy over mounted state(復(fù)制過去的狀態(tài))
    vnode.el = cachedVNode.el
    vnode.component = cachedVNode.component

    // 將節(jié)點(diǎn)放到隊(duì)尾
    keys.delete(key) 
    keys.add(key)
  } else { // 不存在
    keys.add(key) // 加入緩存隊(duì)列
    // prune oldest entry
    // 超過最大值了,將最久沒有使用的組件刪除,也就是隊(duì)頭組件
    if (max && keys.size > parseInt(max as string, 10)) { 
      pruneCacheEntry(keys.values().next().value)
    }
  }

onActivated 和 onDeactived調(diào)用

tips:這兩塊邏輯是在 diff 中,看不懂沒關(guān)系,只要注意一個(gè)點(diǎn)就是被緩存的組件節(jié)點(diǎn)有一個(gè)標(biāo)識 ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE,我們在掛載組件的時(shí)候和卸載組件的時(shí)候判斷一下是否有這個(gè)標(biāo)識,有就去調(diào)用 onActiveated 或 onDeactived;源碼位于:core/package/runtime-core/src/renderer

if (shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE) {
  ;(parentComponent!.ctx as KeepAliveContext).deactivate(vnode)
  return
}

if (
  initialVNode.shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE ||
  (parent &&
    isAsyncWrapper(parent.vnode) &&
    parent.vnode.shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE)
) {
  instance.a && queuePostRenderEffect(instance.a, parentSuspense)
  if (
    __COMPAT__ &&
    isCompatEnabled(DeprecationTypes.INSTANCE_EVENT_HOOKS, instance)
  ) {
    queuePostRenderEffect(
      () => instance.emit('hook:activated'),
      parentSuspense
    )
  }
}

到此這篇關(guān)于Vue3 KeepAlive實(shí)現(xiàn)原理的文章就介紹到這了,更多相關(guān)Vue3 KeepAlive原理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue與原生app的對接交互的方法(混合開發(fā))

    vue與原生app的對接交互的方法(混合開發(fā))

    vue開發(fā)h5項(xiàng)目特別是移動(dòng)端的項(xiàng)目,很多都是打包后掛載在原生APP上的,這篇文章主要介紹了vue與原生app的對接交互的方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2018-11-11
  • Vuex實(shí)現(xiàn)記事本功能

    Vuex實(shí)現(xiàn)記事本功能

    這篇文章主要為大家詳細(xì)介紹了Vuex實(shí)現(xiàn)記事本功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-05-05
  • Vue3.0寫自定義指令的簡單步驟記錄

    Vue3.0寫自定義指令的簡單步驟記錄

    Vue中除了內(nèi)置指令,也允許注冊自定義的指令,下面這篇文章主要給大家介紹了關(guān)于Vue3.0寫自定義指令的相關(guān)資料,需要的朋友可以參考下
    2021-06-06
  • Vue商品控件與購物車聯(lián)動(dòng)效果的實(shí)例代碼

    Vue商品控件與購物車聯(lián)動(dòng)效果的實(shí)例代碼

    這篇文章主要介紹了Vue商品控件與購物車聯(lián)動(dòng)效果的實(shí)例代碼,代碼簡單易懂非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-07-07
  • Vue中如何實(shí)現(xiàn)字符串換行

    Vue中如何實(shí)現(xiàn)字符串換行

    這篇文章主要介紹了Vue中如何實(shí)現(xiàn)字符串換行問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Vue3使用Proxy實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽的原因分析

    Vue3使用Proxy實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽的原因分析

    在本篇文章里小編給大家整理的是一篇關(guān)于Vue3使用Proxy實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽的原因分析內(nèi)容,有需要的朋友們可以跟著學(xué)習(xí)參考下。
    2021-11-11
  • 使用Vue綁定class和style樣式的幾種寫法總結(jié)

    使用Vue綁定class和style樣式的幾種寫法總結(jié)

    這篇文章主要介紹了使用Vue綁定class和style樣式的幾種寫法,文章通過代碼示例介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下
    2023-07-07
  • Vue中對比scoped css和css module的區(qū)別

    Vue中對比scoped css和css module的區(qū)別

    這篇文章主要介紹了Vue中scoped css和css module的區(qū)別對比,scoped css可以直接在能跑起來的vue項(xiàng)目中使用而css module需要增加css-loader配置才能生效。具體內(nèi)容詳情大家參考下本文
    2018-05-05
  • 如何在寶塔面板部署vue項(xiàng)目

    如何在寶塔面板部署vue項(xiàng)目

    這篇文章主要給大家介紹了關(guān)于如何在寶塔面板部署vue項(xiàng)目的相關(guān)資料,寶塔面板可以通過Nginx來部署Vue項(xiàng)目,并解決跨域問題,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
    2023-11-11
  • Vue 清除Form表單校驗(yàn)信息的解決方法(清除表單驗(yàn)證上次提示信息)

    Vue 清除Form表單校驗(yàn)信息的解決方法(清除表單驗(yàn)證上次提示信息)

    這篇文章主要介紹了Vue 清除Form表單校驗(yàn)信息的解決方法(清除表單驗(yàn)證上次提示信息),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-04-04

最新評論