欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中使用keep-alive動(dòng)態(tài)刪除已緩存組件方式

 更新時(shí)間:2022年08月11日 10:06:23   作者:FighterLiu  
這篇文章主要介紹了vue中使用keep-alive動(dòng)態(tài)刪除已緩存組件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

項(xiàng)目場(chǎng)景

在做后臺(tái)管理系統(tǒng)的時(shí)候,有這樣一個(gè)需求:

后臺(tái)的界面如下:

點(diǎn)擊左邊的菜單,會(huì)在右邊的頂部生成一個(gè)個(gè)tag導(dǎo)航標(biāo)簽。當(dāng)打開多個(gè)tag頁時(shí),用戶可以在多個(gè)tag之間進(jìn)行切換。需要在新增,修改頁面切換tag時(shí)候,保留之前的信息,不進(jìn)行頁面的刷新。

問題描述

經(jīng)過查詢vue文檔,可以使用keep-alive實(shí)現(xiàn)標(biāo)簽路由緩存,實(shí)現(xiàn)方式如下:

在路由配置的meta中添加keepAlive,如下:

{
    path: '/actdebt',
    component: Layout,
    redirect: '/actdebt/add',
    children: [
      {
        path: 'add',
        name: 'XXX新增配置',
        meta: {
          keepAlive: true,
        },
        component: () =>
            import (/* webpackChunkName: "page" */'@/views/bankact/actdebt/add')
      }]
  },

然后在頁面中使用v-if做判斷,并且加上key

<keep-alive>
   <router-view :key="$route.fullPath" class="avue-view"             
    v-if="$route.meta.keepAlive" />
</keep-alive>
   <router-view class="avue-view" v-if="!$route.meta.keepAlive" />

使用上面這種方式解決了修改不同記錄的緩存問題,因?yàn)椴煌涗浀膄ullPath 不一樣,這樣的話key就會(huì)不一樣。

但是對(duì)于新增和修改同一條記錄還是有緩存問題。例如新增一條記錄保存成功后,下次在打開新增頁面,還是緩存有之前的記錄。

修改頁面也是的,修改同一條記錄保存成功后,再次打開可能還是會(huì)有之前的修改數(shù)據(jù)。

解決方案

要解決上面這種問題我想到的解決方案為:在不同的tag導(dǎo)航欄切換的時(shí)候,保留緩存數(shù)據(jù)。當(dāng)關(guān)閉tag導(dǎo)航欄或者關(guān)閉頁面的時(shí)候,清除緩存。

清除緩存可以在組件里面的deactivated鉤子函數(shù)調(diào)用this.$destroy();但是發(fā)現(xiàn)下次打開這個(gè)頁面的時(shí)候,新的組件不會(huì)被緩存了。

可以利用keep-alive的include,新打開標(biāo)簽時(shí),把當(dāng)前組件名加入到include數(shù)組里,關(guān)閉標(biāo)簽時(shí)從數(shù)組中刪除關(guān)閉標(biāo)簽的組件名就可以了。

Include里面的值必須和組件的name屬性保持一致,如下:

但是如果我同一個(gè)組件加載了兩次,一個(gè)需要緩存,一個(gè)不需要緩存。但是他們的name卻是一樣的,還是無法解決問題。

所以是否可以重寫keep-alive源碼,使include可以按照路由地址匹配,而不是按照組件的name匹配。完整的代碼如下:

新建keepAlive.js文件

/**
 * base-keep-alive 主要解決問題場(chǎng)景:多級(jí)路由緩存
 * 前提:保證動(dòng)態(tài)路由生成的route name 值都聲明了且唯一
 * 基于以上對(duì)keep-alive進(jìn)行以下改造:
 *   1. 組件名稱獲取更改為路由名稱
 *   2. cache緩存key也更改為路由名稱
 *   3. pruneCache
 */
 const _toString = Object.prototype.toString
 function isRegExp(v) {
   return _toString.call(v) === '[object RegExp]'
 }
 export function remove(arr, item) {
   if (arr.length) {
     const index = arr.indexOf(item)
     if (index > -1) {
       return arr.splice(index, 1)
     }
   }
 }
 /**
  * 1. 主要更改了 name 值獲取的規(guī)則
  * @param {*} opts
  */
 function getComponentName(opts) {
   // return opts && (opts.Ctor.options.name || opts.tag)
   return this.$route.path
 }
 function isDef(v) {
   return v !== undefined && v !== null
 }
 function isAsyncPlaceholder(node) {
   return node.isComment && node.asyncFactory
 }
 function getFirstComponentChild(children) {
   if (Array.isArray(children)) {
     for (let i = 0; i < children.length; i++) {
       const c = children[i]
       if (isDef(c) && (isDef(c.componentOptions) || isAsyncPlaceholder(c))) {
         return c
       }
     }
   }
 }
 function matches(pattern, name) {
   if (Array.isArray(pattern)) {
     return pattern.indexOf(name) > -1
   } else if (typeof pattern === 'string') {
     return pattern.split(',').indexOf(name) > -1
   } else if (isRegExp(pattern)) {
     return pattern.test(name)
   }
   /* istanbul ignore next */
   return false
 }
 
 function pruneCache(keepAliveInstance, filter) {
   const { cache, keys, _vnode } = keepAliveInstance
   for (const key in cache) {
     const cachedNode = cache[key]
     if (cachedNode) {
       // ------------ 3. 之前默認(rèn)從router-view取儲(chǔ)存key值, 現(xiàn)在改為路由name, 所以這里得改成當(dāng)前key
       // const name = getComponentName.call(keepAliveInstance, cachedNode.componentOptions)
       const name = key
       if (name && !filter(name)) {
         pruneCacheEntry(cache, key, keys, _vnode)
       }
     }
   }
 }
 
 function pruneCacheEntry(
   cache,
   key,
   keys,
   current
 ) {
   const cached = cache[key]
   if (cached && (!current || cached.tag !== current.tag)) {
     cached.componentInstance.$destroy()
   }
   cache[key] = null
   remove(keys, key)
 }
 
 const patternTypes = [String, RegExp, Array]
 
 export default {
   name: 'keep-alive',
   // abstract: true,
   props: {
     include: patternTypes,
     exclude: patternTypes,
     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)
     const componentOptions = vnode && vnode.componentOptions
     if (componentOptions) {
       // check pattern
       const name = getComponentName.call(this, componentOptions)
       // ---------- 對(duì)于沒有name值得設(shè)置為路由得name, 支持vue-devtool組件名稱顯示
       if (!componentOptions.Ctor.options.name) {
         vnode.componentOptions.Ctor.options.name
       }
       const { include, exclude } = this
       if (
         // not included
         (include && (!name || !matches(include, name))) ||
         // excluded
         (exclude && name && matches(exclude, name))
       ) {
         return vnode
       }
 
       const { cache, keys } = this
       // ------------------- 儲(chǔ)存的key值, 默認(rèn)從router-view設(shè)置的key中獲取
       // const key = vnode.key == null
       //   ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
       //   : vnode.key
 
       // ------------------- 2. 儲(chǔ)存的key值設(shè)置為路由中得name值
       const key = name
 
       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
         if (this.max && keys.length > parseInt(this.max)) {
           pruneCacheEntry(cache, keys[0], keys, this._vnode)
         }
       }
       vnode.data.keepAlive = true
     }
     return vnode || (slot && slot[0])
   }
 }

然后在main.js中引入該組件,使組件可以全局使用

在頁面直接使用BaseKeepAlive:

 <BaseKeepAlive :include="cachetags">
            <router-view :key="$route.fullPath" class="avue-view" />
          </BaseKeepAlive>

cachetags 方法就是新打開標(biāo)簽時(shí),把當(dāng)前組件名加入到include數(shù)組里,關(guān)閉標(biāo)簽時(shí)從數(shù)組中刪除關(guān)閉標(biāo)簽,源碼如下:

computed: {
    ...mapGetters(['isLock',  "tagList",'isCollapse', 'website']),
    cachetags(){
      let list=[]
      for(let item of this.tagList){
        if(!validatenull(item.keepalive)&&item.keepalive){
        list.push(item.value)
        }
      
      }
    return list.join(',')
    }
    },

方法中的tagList就是導(dǎo)航欄當(dāng)前打開相應(yīng)的tag集合如下圖所示

以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue中el-autocomplete支持分頁上拉加載功能

    vue中el-autocomplete支持分頁上拉加載功能

    最近在項(xiàng)目中使用了ElementUI的el-autocomplete,下面這篇文章主要介紹了vue中el-autocomplete支持分頁上拉加載功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-11-11
  • Vue源碼cached解析

    Vue源碼cached解析

    最近在寫閉包的應(yīng)用的時(shí)候,出現(xiàn)了一個(gè)cached函數(shù),來源于Vue源碼,利用了閉包變量不會(huì)被回收的特點(diǎn),可以緩存變量,cached本質(zhì)上是一個(gè)高階函數(shù),它接受一個(gè)函數(shù)的參數(shù),同時(shí)返回一個(gè)函數(shù)
    2022-08-08
  • vue3中使用router4 keepalive的問題

    vue3中使用router4 keepalive的問題

    這篇文章主要介紹了vue3中使用router4 keepalive的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • vue?內(nèi)置組件?component?的用法示例詳解

    vue?內(nèi)置組件?component?的用法示例詳解

    這篇文章主要介紹了vue內(nèi)置組件component的用法,本文給大家介紹了component內(nèi)置組件切換方法,通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-08-08
  • vue mint-ui 實(shí)現(xiàn)省市區(qū)街道4級(jí)聯(lián)動(dòng)示例(仿淘寶京東收貨地址4級(jí)聯(lián)動(dòng))

    vue mint-ui 實(shí)現(xiàn)省市區(qū)街道4級(jí)聯(lián)動(dòng)示例(仿淘寶京東收貨地址4級(jí)聯(lián)動(dòng))

    本篇文章主要介紹了vue mint-ui 實(shí)現(xiàn)省市區(qū)街道4級(jí)聯(lián)動(dòng)(仿淘寶京東收貨地址4級(jí)聯(lián)動(dòng)),非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2017-10-10
  • elementUI table如何給表頭添加氣泡顯示

    elementUI table如何給表頭添加氣泡顯示

    這篇文章主要介紹了elementUI table如何給表頭添加氣泡顯示問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • 基于Vue.js+Nuxt開發(fā)自定義彈出層組件

    基于Vue.js+Nuxt開發(fā)自定義彈出層組件

    這篇文章主要介紹了基于Vue.js+Nuxt開發(fā)自定義彈出層組件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-10-10
  • 深入理解vuex2.0 之 modules

    深入理解vuex2.0 之 modules

    本篇文章主要介紹了vuex2.0 之 modules,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-11-11
  • webpack中的optimization配置示例詳解

    webpack中的optimization配置示例詳解

    這篇文章主要介紹了webpack中的optimization配置詳解,主要就是根據(jù)不同的策略來分割打包出來的bundle,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-02-02
  • vue實(shí)現(xiàn)頁面div盒子拖拽排序功能

    vue實(shí)現(xiàn)頁面div盒子拖拽排序功能

    本文主要介紹了vue實(shí)現(xiàn)頁面div盒子拖拽排序功能,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-10-10

最新評(píng)論