最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

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

三、原理分析

keep-alive是vue中內(nèi)置的一個(gè)組件

源碼位置：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() {
    /* 獲取默認(rèn)插槽中的第一個(gè)組件節(jié)點(diǎn) */
    const slot = this.$slots.default
    const vnode = getFirstComponentChild(slot)
    /* 獲取該組件節(jié)點(diǎn)的componentOptions */
    const componentOptions = vnode && vnode.componentOptions

    if (componentOptions) {
      /* 獲取該組件節(jié)點(diǎn)的名稱，優(yōu)先獲取組件的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對(duì)象中去尋找是否有該值，如果有則表示該組件有緩存，即命中緩存 */
      if (cache[key]) {
        vnode.componentInstance = cache[key].componentInstance
        // make current key freshest
        remove(keys, key)
        keys.push(key)
      }
        /* 如果沒有命中緩存，則將其設(shè)置進(jìn)緩存 */
        else {
        cache[key] = vnode
        keys.push(key)
        // prune oldest entry
        /* 如果配置了max并且緩存的長(zhǎng)度超過了this.max，則從緩存中刪除第一個(gè) */
        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，在組件渲染的時(shí)候會(huì)自動(dòng)執(zhí)行render函數(shù)

this.cache是一個(gè)對(duì)象，用來存儲(chǔ)需要緩存的組件，它將以如下形式存儲(chǔ)：

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

在組件銷毀的時(shí)候執(zhí)行pruneCacheEntry函數(shù)

function pruneCacheEntry (
  cache: VNodeCache,
  key: string,
  keys: Array,
  current?: VNode
) {
  const cached = cache[key]
  /* 判斷當(dāng)前沒有處于被渲染狀態(tài)的組件，將其銷毀*/
  if (cached && (!current || cached.tag !== current.tag)) {
    cached.componentInstance.$destroy()
  }
  cache[key] = null
  remove(keys, key)
}

在mounted鉤子函數(shù)中觀測(cè) 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 發(fā)生了變化，即表示定義需要緩存的組件的規(guī)則或者不需要緩存的組件的規(guī)則發(fā)生了變化，那么就執(zhí)行pruneCache函數(shù)，函數(shù)如下：

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

在該函數(shù)內(nèi)對(duì)this.cache對(duì)象進(jìn)行遍歷，取出每一項(xiàng)的name值，用其與新的緩存規(guī)則進(jìn)行匹配，如果匹配不上，則表示在新的緩存規(guī)則下該組件已經(jīng)不需要被緩存，則調(diào)用pruneCacheEntry函數(shù)將其從this.cache對(duì)象剔除即可

關(guān)于keep-alive的最強(qiáng)大緩存功能是在render函數(shù)中實(shí)現(xiàn)

首先獲取組件的key值：

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

拿到key值后去this.cache對(duì)象中去尋找是否有該值，如果有則表示該組件有緩存，即命中緩存，如下：

/* 如果命中緩存，則直接從緩存中拿 vnode 的組件實(shí)例 */
if (cache[key]) {
    vnode.componentInstance = cache[key].componentInstance
    /* 調(diào)整該組件key的順序，將其從原來的地方刪掉并重新放在最后一個(gè) */
    remove(keys, key)
    keys.push(key)
}

直接從緩存中拿 vnode 的組件實(shí)例，此時(shí)重新調(diào)整該組件key的順序，將其從原來的地方刪掉并重新放在this.keys中最后一個(gè)

this.cache對(duì)象中沒有該key值的情況，如下：

/* 如果沒有命中緩存，則將其設(shè)置進(jìn)緩存 */
else {
    cache[key] = vnode
    keys.push(key)
    /* 如果配置了max并且緩存的長(zhǎng)度超過了this.max，則從緩存中刪除第一個(gè) */
    if (this.max && keys.length > parseInt(this.max)) {
        pruneCacheEntry(cache, keys[0], keys, this._vnode)
    }
}

表明該組件還沒有被緩存過，則以該組件的key為鍵，組件vnode為值，將其存入this.cache中，并且把key存入this.keys中

此時(shí)再判斷this.keys中緩存組件的數(shù)量是否超過了設(shè)置的最大緩存數(shù)量值this.max，如果超過了，則把第一個(gè)緩存組件刪掉

四、思考題：緩存后如何獲取數(shù)據(jù)

解決方案可以有以下兩種：

• beforeRouteEnter

• actived

beforeRouteEnter

每次組件渲染的時(shí)候，都會(huì)執(zhí)行beforeRouteEnter

beforeRouteEnter(to, from, next){
    next(vm=>{
        console.log(vm)
        // 每次進(jìn)入路由執(zhí)行
        vm.getData()  // 獲取數(shù)據(jù)
    })
},

actived

在keep-alive緩存的組件被激活的時(shí)候，都會(huì)執(zhí)行actived鉤子

activated(){
   this.getData() // 獲取數(shù)據(jù)
},

注意：服務(wù)器端渲染期間avtived不被調(diào)用

感謝各位的閱讀，以上就是“vue內(nèi)置組件keep-alive怎么使用”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)vue內(nèi)置組件keep-alive怎么使用這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！