快捷導(dǎo)航

vue自定義keepalive組件的問(wèn)題解析

更新時(shí)間：2022年07月06日 14:22:47 作者：神經(jīng)蛙12138

這篇文章主要介紹了vue自定義keepalive組件的相關(guān)資料,keep-alive組件是使用?include?exclude這兩個(gè)屬性傳入組件名稱(chēng)來(lái)確認(rèn)哪些可以被緩存的，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

vue自定義keepalive組件

前一陣來(lái)了一個(gè)新的需求，要在vue項(xiàng)目中實(shí)現(xiàn)一個(gè)多開(kāi)tab頁(yè)面的功能，本來(lái)心想，這不簡(jiǎn)單嘛就是一個(gè)增加按鈕重定向嗎？（當(dāng)然如果這么簡(jiǎn)單我就不寫(xiě)這個(gè)文章了）。很快寫(xiě)完，提交測(cè)試。測(cè)試大哥很快就提交了一個(gè)問(wèn)題："你兩個(gè)tab頁(yè)訪問(wèn)同一個(gè)鏈接，怎么還是個(gè)聯(lián)動(dòng)的呢？"。我擦，這指定是緩存的問(wèn)題。

為什么會(huì)出現(xiàn)這種情況呢

keep-alive組件是使用 include exclude這兩個(gè)屬性傳入組件名稱(chēng)來(lái)確認(rèn)哪些可以被緩存的

    <keep-alive exclude="a,b,c" >
        <router-view></router-view>
    </keep-alive>

我們?cè)诳匆幌?a rel="external nofollow" target="_blank">源碼，看看人家是怎么實(shí)現(xiàn)的（這兩張圖截的真難看）

male

主要邏輯（直說(shuō)上述代碼）就是根據(jù)傳入的 include, exclude 兩個(gè)屬性傳入數(shù)組，根據(jù)當(dāng)前訪問(wèn)的組件名稱(chēng)判斷。我們相同鏈接都訪問(wèn)同一個(gè)組件名稱(chēng)（name）相同，第二次訪問(wèn)的時(shí)候，鏈接指向的是同一個(gè)組件，因?yàn)槭褂媒M件的name作為緩存key，此時(shí)會(huì)被認(rèn)為是讀取緩存操作，就會(huì)直接加載緩存并渲染，所以出現(xiàn)了兩個(gè)tab頁(yè)訪問(wèn)同一個(gè)鏈接，出現(xiàn)聯(lián)動(dòng)情況

如何解決這個(gè)問(wèn)題呢

這個(gè)比較簡(jiǎn)單之前是因?yàn)榻M件name當(dāng)key導(dǎo)致的，那我們就不使用組件的name作為key了，改為name+tab的index作為key。

問(wèn)題知道了怎么解決呢

思路有了擼代碼

group-keep-alive.js

function remove(arr, item) {
  if (arr.length) {
    var index = arr.indexOf(item)
    if (index > -1) {
      return arr.splice(index, 1)
    }
  }
}
function getFirstComponentChild(children) {
  if (Array.isArray(children)) {
    for (var i = 0; i < children.length; i++) {
      var c = children[i]
      if (isDef(c) && (isDef(c.componentOptions) || isAsyncPlaceholder(c))) {
        return c
      }
    }
  }
}
function isDef(v) {
  return v !== undefined && v !== null
}
function isAsyncPlaceholder(node) {
  return node.isComment && node.asyncFactory
}
var patternTypes = [String, RegExp, Array]
export default {
  name: 'keep-alive',
  abstract: true,
  computed: {
    // 這里算是一個(gè)偽代碼
    // 緩存的數(shù)組 [{ 'tab1/組件名稱(chēng)':comp, 'tab2/組件名稱(chēng)':comp },{ 'tab1/組件名稱(chēng)':comp, 'tab2/組件名稱(chēng)':comp }]  
    cacheArray() {
      return this.$store.state.xxx.groupCache
    },
    // 當(dāng)前選中的分組 例：0/1/2... 這里用來(lái)讀取cache數(shù)組的index
    groupIndex() {
      return this.$store.state.xxx.groupIndex
    }
  },
  created: function created() {
    // 當(dāng)前tab的緩存
    const cache = this.cacheArray[this.groupIndex]
    this.cache = cache || Object.create(null)
    // TODO 頁(yè)面初始化事件,后續(xù)可觸發(fā)初始化事件
  },
  destroyed: function destroyed(to, form) {
    // TODO 頁(yè)面離開(kāi)事件，后續(xù)可觸發(fā)關(guān)閉事件
  },
  render: function render() {
    var slot = this.$slots.default
    var vnode = getFirstComponentChild(slot)
    var componentOptions = vnode && vnode.componentOptions
    // check pattern
    var ref$1 = this
    var cache = ref$1.cache
    const key = `${this.groupIndex}/${componentOptions.Ctor.options.name}`
    // 存在key直接讀取
    if (cache[key]) {
      vnode.componentInstance = cache[key].componentInstance
    } else {
      // 沒(méi)有進(jìn)行緩存
      cache[key] = vnode
    }
    // 寫(xiě)入緩存
    this.$store.dispatch('setGroupCache', {
      cache: this.cache
    })
    return vnode || (slot && slot[0])
  }
}

如何使用

意思一下就行了

<group-keep-alive>
   <router-view :key="key" />
/group-keep-alive>

// key一定要區(qū)分
computed: {
    key() {
      return `${選中index}/${fullpath}`
    },
}