成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue keep-alive實現(xiàn)動態(tài)緩存以及緩存銷毀

littleGrow / 2467人閱讀

摘要：實現(xiàn)動態(tài)緩存以及緩存銷毀需求來源及描述后臺管理系統(tǒng)中，左側(cè)為功能菜單欄，點擊菜單列表，右側(cè)顯示該菜單的功能頁面，本來是一個非常簡單的后臺管理系統(tǒng)布局，現(xiàn)在增加了菜單按鈕點擊左側(cè)菜單欄時，右側(cè)頁面頭部顯示當(dāng)前的頁面標(biāo)題，形成一個列表，點擊可

vue keep-alive實現(xiàn)動態(tài)緩存以及緩存銷毀 需求來源及描述

后臺管理系統(tǒng)中，左側(cè)為功能菜單欄，點擊菜單列表，右側(cè)顯示該菜單的功能頁面，本來是一個非常簡單的后臺管理系統(tǒng)布局，現(xiàn)在增加了tabs菜單按鈕；
點擊左側(cè)菜單欄時，右側(cè)頁面頭部header顯示當(dāng)前的頁面標(biāo)題，形成一個tabs列表，點擊可切換頁面內(nèi)容和關(guān)閉tabs；
需求要求，點擊左側(cè)時，右側(cè)顯示頁面內(nèi)容，同時右側(cè)header增加該頁面的tabs，點擊tabs可以切換頁面，但頁面內(nèi)容不刷新，點擊左側(cè)菜單時，右側(cè)內(nèi)容刷新；

初步解決

第一想到的時利用vue的功能組件

此時只能實現(xiàn)緩存，但是不能根據(jù)需求實現(xiàn)動態(tài)緩存

解決方案

利用include來判斷需要緩存的路由組件，在根據(jù)點擊狀態(tài)更新include



    

利用計算屬性和vuex獲取緩存列表

state: {
        keepAliveList:"",//保存緩存的列表
    },
    mutations: {
        setKeepAliveLists(state,arrListString){
            state.keepAliveList = arrListString;
        },
        
    }

computed:{
    keepAliveList(){
        // 獲取緩存的路由列表
        return this.$store.state.keepAliveList;
    }
}

生成緩存列表，列表的值為各組件中name的值集合拼接的字符串

this.$store.commit("setKeepAliveLists",routerComponentNameList.join())

點擊左側(cè)菜單欄時，更新緩存列表


handleSelect(name) {
    if(this.routerNameMap.has(name)){//如果當(dāng)前點擊的路由已經(jīng)在緩存列表中，則先清除緩存列表，再添加；
        this.resetKeepAive(name,this.keepAliveList);//刪除緩存路由
        this.tabChangeRoute(name);//切換路由
    } else {
        this.routerNameMap.add(name)
        this.tabChangeRoute(name);
    }
},
// 更新要緩存的路由列表
resetKeepAive(name,cacheList) {
    const conf = this.keepAliveList;
    let arr = cacheList.split(",");
    if (name && typeof name === "string") {
        let i = arr.indexOf(name);
        if (i > -1) {
            arr.splice(i, 1);
            this.$store.commit("setKeepAliveLists",arr.join());
            this.$nextTick(() => {//添加緩存路由
                this.$store.commit("setKeepAliveLists",conf);
            })
        }
    }
}

點擊右側(cè)tabs關(guān)閉標(biāo)簽刪除緩存

removeTab(name){
    // 點擊tab上的關(guān)閉按鈕，清除當(dāng)前路由的緩存
    this.routerNameMap.delete(name);
    this.resetKeepAive(name,this.keepAliveList);//刪除緩存路由
}

下面為主要代碼，監(jiān)聽當(dāng)前路由是否被移除緩存，如果移除緩存則需要銷毀該組件，否則內(nèi)容中的緩存組件會越來越來，影響使用性能；
創(chuàng)建一個mixin.js文件，然后引入到需要被動態(tài)緩存的路由組件中即可；

// 路由緩存管理
export default {
    computed: {
        keepAliveConf(){
            return this.$store.state.keepAliveList;
        }
    },
    watch:{
        keepAliveConf(e){
            // 監(jiān)聽緩存列表的變化，如果緩存列表中沒有當(dāng)前的路由或組件則在緩存中銷毀該實例
            let name = this.$options.name;
            if(!e.split(",").includes(name)) {
                this.$destroy()
            }
        }
    },
}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/105699.html

相關(guān)文章

  • vue keep-alive組件的使用以及原理。

    摘要：通過這兩種方式分別檢測是否匹配當(dāng)前組件。修正取出中的不符合條件的，同時不是目前渲染的時，銷毀對應(yīng)的組件實例實例，并從中移除銷毀對應(yīng)的組件實例實例遍歷中的所有項，如果不符合指定的規(guī)則的話，則會執(zhí)行。則會調(diào)用組件實例的方法來將組件銷毀。 keep-alive keep-alive是vue.js的內(nèi)置組件，它能夠把不活動的組件的實例保存在內(nèi)存中，而不是直接的銷毀，它是一個抽象組件，不會被渲染...

    pingan8787 評論0 收藏0

  • 聊聊keep-alive組件的使用及其實現(xiàn)原理

    摘要：為的組件將不會被緩存。通過這兩種方式分別檢測是否匹配當(dāng)前組件。修正取出中的不符合條件的，同時不是目前渲染的時，銷毀對應(yīng)的組件實例實例，并從中移除銷毀對應(yīng)的組件實例實例遍歷中的所有項，如果不符合指定的規(guī)則的話，則會執(zhí)行。 寫在前面 因為對Vue.js很感興趣，而且平時工作的技術(shù)棧也是Vue.js，這幾個月花了些時間研究學(xué)習(xí)了一下Vue.js源碼，并做了總結(jié)與輸出。 文章的原地址：http...

    frolc 評論0 收藏0

  • Vue一個案例引發(fā)的動態(tài)組件與全局事件綁定總結(jié)

    摘要：我們需要的最好效果肯定是當(dāng)前的全局事件就在當(dāng)前的組件下產(chǎn)生作用，當(dāng)我們切換到其他組件時，事件自動刪除，于是我可能想到的就是利用鉤子函數(shù)去刪除這個全局事件。 最近在自學(xué) Vue 也了解了一些基本用法，也記錄了一些筆記有興趣的朋友可以去查看我的其他文章，技術(shù)這東西真的不能光靠看，看是沒有的，你必須要動手實踐，只有在實戰(zhàn)項目中才能發(fā)現(xiàn)問題，才能發(fā)現(xiàn)我們沒有掌握的知識點，然后發(fā)現(xiàn)問題解決問題，...

    MycLambert 評論0 收藏0

  • 個人 vue 項目的優(yōu)化總結(jié)

    摘要：很多優(yōu)化點都是根據(jù)實際情況入手，上面這幾個，都是我在做項目時，感覺不合適而進(jìn)行優(yōu)化的，后面會持續(xù)補充下去 主要說的是，我在項目中，自己遇到的一些小問題和解決方案 圖片 base64 問題 // 有一個 test 的組件 .icon { background: url(../assets/test.png); } // 然后有三個頁面，引入了 test 組...

    taoszu 評論0 收藏0

  • Vue動態(tài)組件和異步組件

    摘要：動態(tài)組件如果我們打算在一個地方根據(jù)不同的狀態(tài)引用不同的組件的話，比如頁，那么給我們提供動態(tài)組件。實現(xiàn)動態(tài)組件的加載。的值可以是一個已經(jīng)注冊的組件的名字或者一個組件的選對象。 動態(tài)組件 如果我們打算在一個地方根據(jù)不同的狀態(tài)引用不同的組件的話，比如tab頁，那么Vue給我們提供動態(tài)組件。 基本使用 Parent.vue {{btn.name}} ...

    nanchen2251 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<