Vue中keep-alive元件的理解

WindrunnerMax發表於2020-08-23
VueKeep-Alive元件

對keep-alive元件的理解

當在元件之間切換的時候，有時會想保持這些元件的狀態，以避免反覆重渲染導致的效能等問題，使用<keep-alive>包裹動態元件時，會快取不活動的元件例項，而不是銷燬它們。

描述

重新建立動態元件的行為通常是非常有用的，但是在有些情況下我們更希望那些標籤的元件例項能夠被在它們第一次被建立的時候快取下來，此時使用<keep-alive>包裹元件即可快取當前元件例項，將元件快取到記憶體，用於保留元件狀態或避免重新渲染，和<transition>相似它，其自身不會渲染一個DOM元素，也不會出現在元件的父元件鏈中。

<keep-alive>
    <component v-bind:is="currentComponent" class="tab"></component>
</keep-alive>

被<keep-alive>包含的元件不會被再次初始化，也就意味著不會重走生命週期函式，<keep-alive>保持了當前的元件的狀態，在第一次建立的時候回正常觸發其建立生命週期，但是由於元件其實並未銷燬，所以不會觸發元件的銷燬生命週期，而當元件在<keep-alive>內被切換時，它的activated和deactivated這兩個生命週期鉤子函式將會被對應執行。

export default {
    data: function() {
        return {
        
        }
    },
    activated: function(){
        console.log("activated");
    },
    deactivated: function(){
        console.log("deactivated");
    },
}

<keep-alive>可以接收3個屬性做為引數進行匹配對應的元件進行快取，匹配首先檢查元件自身的name選項，如果name選項不可用，則匹配它的區域性註冊名稱，即父元件components選項的鍵值，匿名元件不能被匹配，除了使用<keep-alive>的props控制元件快取，通常還可以配合vue-router在定義時的meta屬性以及在template定義的<keep-alive>進行元件的有條件的快取控制。

  • include: 包含的元件，可以為字串，陣列，以及正規表示式,只有匹配的元件會被快取。
  • exclude: 排除的元件，以為字串，陣列，以及正規表示式,任何匹配的元件都不會被快取，當匹配條件同時在include與exclude存在時，以exclude優先順序最高。
  • max: 快取元件的最大值，型別為字元或者數字,可以控制快取元件的個數，一旦這個數字達到了，在新例項被建立之前，已快取元件中最久沒有被訪問的例項會被銷燬掉。
<!-- 包含 逗號分隔字串 -->
<keep-alive include="a,b">
    <component :is="show"></component>
</keep-alive>

<!-- 包含 正規表示式 使用v-bind -->
<keep-alive :include="/a|b/">
    <component :is="show"></component>
</keep-alive>

<!-- 包含 陣列 使用v-bind -->
<keep-alive :include="['a', 'b']">
    <component :is="show"></component>
</keep-alive>

<!-- 排除 逗號分隔字串 -->
<keep-alive exclude="a,b">
    <component :is="show"></component>
</keep-alive>

<!-- 最大快取量 數字 -->
<keep-alive :max="10">
    <component :is="show"></component>
</keep-alive>

<keep-alive>是用在其一個直屬的子元件被開關的情形，如果在其中有v-for則不會工作，如果有上述的多個條件性的子元素，<keep-alive>要求同時只有一個子元素被渲染，通俗點說，<keep-alive>最多同時只能存在一個子元件，在<keep-alive>的render函式中定義的是在渲染<keep-alive>內的元件時，Vue是取其第一個直屬子元件來進行快取。

const vnode: VNode = getFirstComponentChild(this.$slots.default);

實現

Vue中<keep-alive>元件原始碼定義在dev/src/core/components/keep-alive.js，本次分析實現的commit id為215f877。
在<keep-alive>初始化時的created階段會初始化兩個變數，分別為cache和keys，mounted階段會對include和exclude變數的值做監測。

export default {
    created () {
        this.cache = Object.create(null)
        this.keys = []
    },
    mounted () {
        this.$watch('include', val => {
            pruneCache(this, name => matches(val, name))
        })
        this.$watch('exclude', val => {
            pruneCache(this, name => !matches(val, name))
        })
    },
}

上邊的$watch方法能夠對引數的變化進行檢測，如果include或者exclude的值發生變化，就會觸發pruneCache函式，不過篩選的條件需要根據matches函式的返回值來決定，matches函式接收三種型別的引數string、RegExp、Array，用以決定是否進行快取。

function matches (pattern: string | RegExp | Array<string>, name: string): boolean {
    if (Array.isArray(pattern)) {
        return pattern.indexOf(name) > -1
    } else if (typeof pattern === 'string') {
        return pattern.split(',').indexOf(name) > -1
    } else if (isRegExp(pattern)) {
        return pattern.test(name)
    }
    /* istanbul ignore next */
    return false
}

pruneCache函式用以修建不符合條件的key值，每當過濾條件改變，都需要呼叫pruneCacheEntry方法從已有的快取中修建不符合條件的key。

function pruneCache (keepAliveInstance: any, filter: Function) {
    const { cache, keys, _vnode } = keepAliveInstance
    for (const key in cache) {
        const cachedNode: ?VNode = cache[key]
        if (cachedNode) {
            const name: ?string = getComponentName(cachedNode.componentOptions)
            if (name && !filter(name)) {
                pruneCacheEntry(cache, key, keys, _vnode)
            }
        }
    }
}

function pruneCacheEntry (
    cache: VNodeCache,
    key: string,
    keys: Array<string>,
    current?: VNode
) {
    const cached = cache[key]
    if (cached && (!current || cached.tag !== current.tag)) {
        cached.componentInstance.$destroy()
    }
    cache[key] = null
    remove(keys, key)
}

在每次渲染即render時，首先獲取第一個子元件，之後便是獲取子元件的配置資訊，獲取其資訊，判斷該元件在渲染之前是否符合過濾條件，不需要快取的便直接返回該元件，符合條件的直接將該元件例項從快取中取出，並調整該元件在keys陣列中的位置，將其放置於最後，如果快取中沒有該元件，那麼將其加入快取，並且定義了max並且快取元件數量如果超出max定義的值則將第一個快取的vnode移除，之後返回元件並渲染。

export default {
  render () {
    const slot = this.$slots.default
    const vnode: VNode = getFirstComponentChild(slot)
    const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
    if (componentOptions) {
      // check pattern
      const name: ?string = getComponentName(componentOptions)
      const { include, exclude } = this
      if (
        // not included
        (include && (!name || !matches(include, name))) ||
        // excluded
        (exclude && name && matches(exclude, name))
      ) {
        return vnode
      }

      const { cache, keys } = this
      const key: ?string = vnode.key == null
        // same constructor may get registered as different local components
        // so cid alone is not enough (#3269)
        ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
        : vnode.key
      if (cache[key]) {
        vnode.componentInstance = cache[key].componentInstance
        // make current key freshest
        remove(keys, key)
        keys.push(key)
      } else {
        cache[key] = vnode
        keys.push(key)
        // prune oldest entry
        if (this.max && keys.length > parseInt(this.max)) {
          pruneCacheEntry(cache, keys[0], keys, this._vnode)
        }
      }

      vnode.data.keepAlive = true
    }
    return vnode || (slot && slot[0])
  }
}

每日一題

https://github.com/WindrunnerMax/EveryDay

參考

https://zhuanlan.zhihu.com/p/85120544
https://cn.vuejs.org/v2/api/#keep-alive
https://juejin.im/post/6844904082038063111
https://juejin.im/post/6844903919273918477
https://juejin.im/post/6844904099272458253
https://juejin.im/post/6844904160962281479
https://fullstackbb.com/vue/deep-into-keep-alive-in-vuejs/
https://blog.liuyunzhuge.com/2020/03/20/%E7%90%86%E8%A7%A3vue%E4%B8%ADkeep-alive%E7%BB%84%E4%BB%B6%E6%BA%90%E7%A0%81/

相關文章