vue keep-alive元件的使用以及原理介紹

這篇文章帶給大家的內容是關於vue keep-alive組件的使用以及原理介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

keep-alive

keep-alive是vue.js的內建元件，它能夠把不活動的元件的實例保存在記憶體中，而不是直接的銷毀，它是一個抽象元件，不會被渲染到真實DOM中，也不會出現在父元件鏈中。
它提供了exclude和include兩個屬性，允許元件有條件的快取。

使用

<keep-alive>
    <comment></comment>
</keep-alive>

上面的comment元件會被快取起來。

<keep-alive>
    <coma v-if="test"></coma>
    <comb v-else></comb>
</keep-alive>
<button @click="abc"></button>

export default{
    data(){
        reurn{
            test:true
        }
    },
    methods:{
        abc(){
            this.test=!this.test;
        }
    }
}

點擊button的時候coma元件和comb元件會發生切換，但這時候兩個元件的狀態會被快取起來，假如說a和b元件中都有一個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提供了兩個生命鉤子，actived與deactived。
因為keep-alive會把元件儲存到記憶體中，並不會銷毀或則重新構建，所以不會呼叫元件的creted等方法，需要使用actived和deactived兩個鉤子判斷元件是否處於活動狀態。

深入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 () {
    /* 得到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。

/* 检测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來監聽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中的所有項，如果不符合f​​ilter指定的規則的話，則會執行pruneCacheEntry。 pruneCacheEntry則會呼叫元件實例的$destroy方法來將元件銷毀。

這篇文章到這裡就已經全部結束了，更多其他精彩內容可以關注PHP中文網的JavaScript影片教學專欄！

#

以上是vue keep-alive元件的使用以及原理介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！