聊聊keep-alive元件的使用及其實現原理

染陌同學發表於2019-03-03

Keep-Alive元件

寫在前面

因為對Vue.js很感興趣，而且平時工作的技術棧也是Vue.js，這幾個月花了些時間研究學習了一下Vue.js原始碼，並做了總結與輸出。

文章的原地址：github.com/answershuto…。

在學習過程中，為Vue加上了中文的註釋github.com/answershuto…以及Vuex的註釋github.com/answershuto…，希望可以對其他想學習原始碼的小夥伴有所幫助。

可能會有理解存在偏差的地方，歡迎提issue指出，共同學習，共同進步。

keep-alive

keep-alive是Vue.js的一個內建元件。它能夠不活動的元件例項儲存在記憶體中，而不是直接將其銷燬，它是一個抽象元件，不會被渲染到真實DOM中，也不會出現在父元件鏈中。

它提供了include與exclude兩個屬性，允許元件有條件地進行快取。

具體內容可以參考官網。

使用

用法

<keep-alive>
    <component></component>
</keep-alive>複製程式碼

這裡的component元件會被快取起來。

舉個例子

<keep-alive>
    <coma v-if="test"></coma>
    <comb v-else="test"></comb>
</keep-alive>
<button @click="test=handleClick">請點選</button>複製程式碼

export default {
    data () {
        return {
            test: true
        }
    },
    methods: {
        handleClick () {
            this.test = !this.test;
        }
    }
}複製程式碼

在點選button時候，coma與comb兩個元件會發生切換，但是這時候這兩個元件的狀態會被快取起來，比如說coma與comb元件中都有一個input標籤，那麼input標籤中的內容不會因為元件的切換而消失。

props

keep-alive元件提供了include與exclude兩個屬性來允許元件有條件地進行快取，二者都可以用逗號分隔字串、正規表示式或一個陣列來表示。

<keep-alive include="a">
  <component></component>
</keep-alive>複製程式碼

將快取name為a的元件。

<keep-alive exclude="a">
  <component></component>
</keep-alive>複製程式碼

name為a的元件將不會被快取。

生命鉤子

keep-alive提供了兩個生命鉤子，分別是activated與deactivated。

因為keep-alive會將元件儲存在記憶體中，並不會銷燬以及重新建立，所以不會重新呼叫元件的created等方法，需要用activated與deactivated這兩個生命鉤子來得知當前元件是否處於活動狀態。

深入keep-alive元件實現

說完了keep-alive元件的使用，我們從原始碼角度看一下keep-alive元件究竟是如何實現元件的快取的呢？

created與destroyed鉤子

created鉤子會建立一個cache物件，用來作為快取容器，儲存vnode節點。

created () {
    /* 快取物件 */
    this.cache = Object.create(null)
},複製程式碼

destroyed鉤子則在元件被銷燬的時候清除cache快取中的所有元件例項。

/* destroyed鉤子中銷燬所有cache中的元件例項 */
destroyed () {
    for (const key in this.cache) {
        pruneCacheEntry(this.cache[key])
    }
},複製程式碼

render

接下來是render函式。

render () {
    /* 得到slot插槽中的第一個元件 */
    const vnode: VNode = getFirstComponentChild(this.$slots.default)

    const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
    if (componentOptions) {
        // check pattern
        /* 獲取元件名稱，優先獲取元件的name欄位，否則是元件的tag */
        const name: ?string = getComponentName(componentOptions)
        /* name不在inlcude中或者在exlude中則直接返回vnode（沒有取快取） */
        if (name && (
        (this.include && !matches(this.include, name)) ||
        (this.exclude && matches(this.exclude, name))
        )) {
            return vnode
        }
        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
        /* 如果已經做過快取了則直接從快取中獲取元件例項給vnode，還未快取過則進行快取 */
        if (this.cache[key]) {
            vnode.componentInstance = this.cache[key].componentInstance
        } else {
            this.cache[key] = vnode
        }
        /* keepAlive標記位 */
        vnode.data.keepAlive = true
    }
    return vnode
}複製程式碼

首先通過getFirstComponentChild獲取第一個子元件，獲取該元件的name（存在元件名則直接使用元件名，否則會使用tag）。接下來會將這個name通過include與exclude屬性進行匹配，匹配不成功（說明不需要進行快取）則不進行任何操作直接返回vnode，vnode是一個VNode型別的物件，不瞭解VNode的同學可以參考筆者的另一篇文章《VNode節點》 .

/* 檢測name是否匹配 */
function matches (pattern: string | RegExp, name: string): boolean {
  if (typeof pattern === `string`) {
    /* 字串情況，如a,b,c */
    return pattern.split(`,`).indexOf(name) > -1
  } else if (isRegExp(pattern)) {
    /* 正則 */
    return pattern.test(name)
  }
  /* istanbul ignore next */
  return false
}複製程式碼

檢測include與exclude屬性匹配的函式很簡單，include與exclude屬性支援字串如”a,b,c”這樣元件名以逗號隔開的情況以及正規表示式。matches通過這兩種方式分別檢測是否匹配當前元件。

if (this.cache[key]) {
    vnode.componentInstance = this.cache[key].componentInstance
} else {
    this.cache[key] = vnode
}複製程式碼

接下來的事情很簡單，根據key在this.cache中查詢，如果存在則說明之前已經快取過了，直接將快取的vnode的componentInstance（元件例項）覆蓋到目前的vnode上面。否則將vnode儲存在cache中。

最後返回vnode（有快取時該vnode的componentInstance已經被替換成快取中的了）。

watch

用watch來監聽pruneCache與pruneCache這兩個屬性的改變，在改變的時候修改cache快取中的快取資料。

watch: {
    /* 監視include以及exclude，在被修改的時候對cache進行修正 */
    include (val: string | RegExp) {
        pruneCache(this.cache, this._vnode, name => matches(val, name))
    },
    exclude (val: string | RegExp) {
        pruneCache(this.cache, this._vnode, name => !matches(val, name))
    }
},複製程式碼

來看一下pruneCache的實現。

/* 修正cache */
function pruneCache (cache: VNodeCache, current: VNode, filter: Function) {
  for (const key in cache) {
    /* 取出cache中的vnode */
    const cachedNode: ?VNode = cache[key]
    if (cachedNode) {
      const name: ?string = getComponentName(cachedNode.componentOptions)
      /* name不符合filter條件的，同時不是目前渲染的vnode時，銷燬vnode對應的元件例項（Vue例項），並從cache中移除 */
      if (name && !filter(name)) {
        if (cachedNode !== current) {
          pruneCacheEntry(cachedNode)
        }
        cache[key] = null
      }
    }
  }
} 

/* 銷燬vnode對應的元件例項（Vue例項） */
function pruneCacheEntry (vnode: ?VNode) {
  if (vnode) {
    vnode.componentInstance.$destroy()
  }
}複製程式碼

遍歷cache中的所有項，如果不符合filter指定的規則的話，則會執行pruneCacheEntry。pruneCacheEntry則會呼叫元件例項的$destroy方法來將元件銷燬。

最後

Vue.js內部將DOM節點抽象成了一個個的VNode節點，keep-alive元件的快取也是基於VNode節點的而不是直接儲存DOM結構。它將滿足條件（pruneCache與pruneCache）的元件在cache物件中快取起來，在需要重新渲染的時候再將vnode節點從cache物件中取出並渲染。