聊聊對vue內建組件keep-alive的理解

Keep-alive 是什麼？以下這篇文章帶大家聊聊對vue內建元件keep-alive的理解，希望對大家有幫助！

一、Keep-alive 是什麼

keep-alive是vue中的內建元件，能在元件切換過程中將狀態保留在記憶體中，防止重複渲染DOMvuejs影片教學、web前端開發】

#keep-alive

keep-alive可以設定以下props屬性：

• include
• exclude
• max

關於keep-alive的基本用法：

<keep-alive>
  <component :is="view"></component>
</keep-alive>

使用includes和exclude：

<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="[&#39;a&#39;, &#39;b&#39;]">
  <component :is="view"></component>
</keep-alive>

符合先檢查元件本身的 namename components

設定了keep-alive 快取的元件，會多出兩個生命週期鉤子（activated與 deactivated）：

• 第一次進入元件時：beforeRouteEnterbeforeCreatecreated> ## > created> ## > created> # mountedactivated ... ... > beforeRouteLeave#deactivated#再次進入元件時： beforeRouteEnter
activated ... ... > 

beforeRouteLeavedeactivated

#1 #二、使用場景

使用原則：當我們在某些​​場景下不需要讓頁面重新載入時我們可以使用

keepalive舉個栗子:當我們從首頁

–>

列表頁–>商詳頁–>再返回，這時候列表頁應該是需要keep-alive

從

首頁–>列表頁–>商詳頁

–>

回到列表頁(需要快取)–>回到首頁(需要快取)

–>

再次進入列表頁(不需要快取)，這時候可以按需來控制頁面的keep-alive

在路由中設定###keepAlive###屬性判斷是否需要緩存###

{
  path: 'list',
  name: 'itemList', // 列表页
  component (resolve) {
    require(['@/pages/item/list'], resolve)
 },
 meta: {
  keepAlive: true,
  title: '列表页'
 }
}

###使用#########

<div id="app" class=&#39;wrapper&#39;>
    <keep-alive>
        <!-- 需要缓存的视图组件 --> 
        <router-view v-if="$route.meta.keepAlive"></router-view>
     </keep-alive>
      <!-- 不需要缓存的视图组件 -->
     <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>

######三、原理分析############keep-alive# ##是###vue###中內建的一個元件######原始碼位置：src/core/components/keep-alive.js###

export default {
  name: 'keep-alive',
  abstract: true,

  props: {
    include: [String, RegExp, Array],
    exclude: [String, RegExp, Array],
    max: [String, Number]
  },

  created () {
    this.cache = Object.create(null)
    this.keys = []
  },

  destroyed () {
    for (const key in this.cache) {
      pruneCacheEntry(this.cache, key, this.keys)
    }
  },

  mounted () {
    this.$watch('include', val => {
      pruneCache(this, name => matches(val, name))
    })
    this.$watch('exclude', val => {
      pruneCache(this, name => !matches(val, name))
    })
  },

  render() {
    /* 获取默认插槽中的第一个组件节点 */
    const slot = this.$slots.default
    const vnode = getFirstComponentChild(slot)
    /* 获取该组件节点的componentOptions */
    const componentOptions = vnode && vnode.componentOptions

    if (componentOptions) {
      /* 获取该组件节点的名称，优先获取组件的name字段，如果name不存在则获取组件的tag */
      const name = getComponentName(componentOptions)

      const { include, exclude } = this
      /* 如果name不在inlcude中或者存在于exlude中则表示不缓存，直接返回vnode */
      if (
        (include && (!name || !matches(include, name))) ||
        // excluded
        (exclude && name && matches(exclude, name))
      ) {
        return vnode
      }

      const { cache, keys } = this
      /* 获取组件的key值 */
      const key = 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
     /*  拿到key值后去this.cache对象中去寻找是否有该值，如果有则表示该组件有缓存，即命中缓存 */
      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
        /* 如果配置了max并且缓存的长度超过了this.max，则从缓存中删除第一个 */
        if (this.max && keys.length > parseInt(this.max)) {
          pruneCacheEntry(cache, keys[0], keys, this._vnode)
        }
      }

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

###可以看到該元件沒有## #template###，而是用了###render###，在元件渲染的時候會自動執行###render###函數#########this.cache###是一個對象，用來儲存需要快取的元件，它將以如下形式儲存：###

this.cache = {
    'key1':'组件1',
    'key2':'组件2',
    // ...
}

###在元件銷毀的時候執行###pruneCacheEntry###函數###

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)
}

###在### mounted###鉤子函數中觀測 ###include### 和 ###exclude### 的變化，如下：###

mounted () {
    this.$watch('include', val => {
        pruneCache(this, name => matches(val, name))
    })
    this.$watch('exclude', val => {
        pruneCache(this, name => !matches(val, name))
    })
}

###如果###include### 或###exclude## # 發生了變化，即表示定義需要快取的元件的規則或不需要快取的元件的規則發生了變化，那麼就執行###pruneCache###函數，函數如下：###

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

###在該函數內對###this.cache###物件進行遍歷，取出每一項的###name###值，用其與新的快取規則進行匹配，如果匹配不上，則表示在新的快取規則下該元件已經不需要被緩存，則呼叫###pruneCacheEntry###函數將其從###this.cache###物件剔除即可######關於###keep-alive ###最強大的快取功能是在###render###函數中實作######先取得元件的###key###值：###

const key = vnode.key == null? 
componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
: vnode.key

###拿到# ##key###值後去###this.cache###物件中去尋找是否有該值，如果有則表示該元件有緩存，即命中緩存，如下：###

/* 如果命中缓存，则直接从缓存中拿 vnode 的组件实例 */
if (cache[key]) {
    vnode.componentInstance = cache[key].componentInstance
    /* 调整该组件key的顺序，将其从原来的地方删掉并重新放在最后一个 */
    remove(keys, key)
    keys.push(key)
}

直接从缓存中拿 vnode 的组件实例，此时重新调整该组件key的顺序，将其从原来的地方删掉并重新放在this.keys中最后一个

this.cache对象中没有该key值的情况，如下：

/* 如果没有命中缓存，则将其设置进缓存 */
else {
    cache[key] = vnode
    keys.push(key)
    /* 如果配置了max并且缓存的长度超过了this.max，则从缓存中删除第一个 */
    if (this.max && keys.length > parseInt(this.max)) {
        pruneCacheEntry(cache, keys[0], keys, this._vnode)
    }
}

表明该组件还没有被缓存过，则以该组件的key为键，组件vnode为值，将其存入this.cache中，并且把key存入this.keys中

此时再判断this.keys中缓存组件的数量是否超过了设置的最大缓存数量值this.max，如果超过了，则把第一个缓存组件删掉

四、思考题：缓存后如何获取数据

解决方案可以有以下两种：

• beforeRouteEnter
• actived

beforeRouteEnter

每次组件渲染的时候，都会执行beforeRouteEnter

beforeRouteEnter(to, from, next){
    next(vm=>{
        console.log(vm)
        // 每次进入路由执行
        vm.getData()  // 获取数据
    })
},

actived

在keep-alive缓存的组件被激活的时候，都会执行actived钩子

activated(){
   this.getData() // 获取数据
},

注意：服务器端渲染期间avtived不被调用

（学习视频分享：vuejs入门教程、编程基础视频）

以上是聊聊對vue內建組件keep-alive的理解的詳細內容。更多資訊請關注PHP中文網其他相關文章！