JS每日一題:vue中keepalive怎么理解？

fsmStudy 發布于2019-08-23 15:12 / 3038人閱讀

摘要：問中怎么理解說在前面是源碼中實現的一個組件感興趣的可以研究源碼什么是我們平時開發中總有部分組件沒有必要多次我們需要將組件進行持久化，使組件狀態維持不變，在下一次展示時，也不會進行重新音譯過來就是保持活著所以在中我們可以使用來進行組件緩存基

20190212問

vue中keepalive怎么理解？

說在前面: keep-alive是vue源碼中實現的一個組件, 感興趣的可以研究源碼 https://github.com/vuejs/vue/...

什么是keepalive

我們平時開發中, 總有部分組件沒有必要多次init, 我們需要將組件進行持久化，使組件狀態維持不變，在下一次展示時，也不會進行重新init

keepalive音譯過來就是保持活著, 所以在vue中我們可以使用keepalive來進行組件緩存

基本使用

// 被keepalive包含的組件會被進行緩存

上面提到被keepalive包含的組件不會被再次init，也就意味著不會重走生命周期函數, 但是平常工作中很多業務場景是希望我們緩存的組件在再次渲染的能做一些事情,vue為keepalive提供了兩個額外的hook

activated 當keepalive包含的組件再次渲染的時候觸發

deactivated 當keepalive包含的組件銷毀的時候觸發

注: 2.1.0 版本后keepalive包含但被exclude排除的組件不會有以上兩個hook

參數

keepalive可以接收3個屬性做為參數進行匹配對應的組件進行緩存

include 包含的組件

exclude 排除的組件

max 緩存組件的最大值

其中include,exclude可以為字符，數組，以及正則表達式
max 類型為字符或者數字

代碼理解

// 只緩存組件name為a或者b的組件
 
  


// 組件名為c的組件不緩存
 
  


// 如果同時使用include,exclude,那么exclude優先于include， 下面的例子也就是只緩存a組件
 
  


// 如果緩存的組件超過了max設定的值5，那么將刪除第一個緩存的組件

配合router使用


// 意思就是$router.meta.keepAlive值為真是將組件進行緩存

    



//router配置
new Router({
    routes: [
        {
            name: "a",
            path: "/a",
            component: A,
            meta: {
                keepAlive: true
            }
        },
        {
            name: "b",
            path: "/b",
            component: B
        }
    ]
})

總結

keepalive是一個抽象組件，緩存vnode，緩存的組件不會被mounted，為此提供activated 和 deactivated 鉤子函數, 使用props max 可以控制緩存組件個數

關于JS每日一題

JS每日一題可以看成是一個語音答題社區
每天利用碎片時間采用60秒內的語音形式來完成當天的考題
群主在次日0點推送當天的參考答案

注絕不僅限于完成當天任務，更多是查漏補缺，學習群內其它同學優秀的答題思路

點擊加入答題

云服務器 GPU云服務器 vue中調用js js事件監聽怎么理解 vue中 java中orm理解

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101675.html

JS每日一題: Vue中mixin怎么理解？

摘要：兩個對象鍵名沖突時，取組件對象的鍵值對也使用同樣的策略進行合并。代碼理解全局混合也可以全局注冊混合對象。注意使用一旦使用全局混合對象，將會影響到所有之后創建的實例為自定義的選項注入一個處理器。 20190122 Vue中mixin怎么理解？ mixin是為了讓可復用的功能靈活的混入到當前組件中，混合的對象可以包含任意組件選項（生命周期，指令之類等等）, mixin翻譯過來叫混合,高級的...

jubincn 2019-08-23 15:28 評論0 收藏0
JS每日一題: 請簡述一下vuex實現原理

摘要：給的實例注入一個的屬性，這也就是為什么我們在的組件中可以通過訪問到的各種數據和狀態源碼位置，是怎么實現的源碼位置是對的的初始化，它接受個參數，為當前實例，為的，為執行的回調函數，為當前模塊的路徑。 20190221 請簡述一下vuex實現原理對vuex基礎概念有不懂的可以點這里 vuex實現原理我們簡單過一遍源碼地址 https://github.com/vuejs/vuex 首...

JohnLui 2019-08-23 15:25 評論0 收藏0
JS每日一題：什么情況下適合使合vuex？Vuex使用中有幾個步驟？

摘要：什么情況下適合使合使用中有幾個步驟開始之前先簡單了解一下定義是一個狀態管理機制采用集中式存儲應用所有組件的狀態嗯，就是一句話能說明白的，沒明白的，我們用代碼再理解一下什么叫集中式式存儲比如下面這段代碼，同時需要用到，那么我們首先能想到就是在 20190121 什么情況下適合使合vuex？Vuex使用中有幾個步驟？開始之前先簡單了解一下vuex 定義: vuex是一個狀態管理機制,采用...

wow_worktile 2019-08-23 15:22 評論0 收藏0
JS每日一題：簡述一下Vue.js的template編譯過程？

摘要：問簡述一下的編譯過程先上一張圖大致看一下整個流程從上圖中我們可以看到是從后開始進行中整體邏輯分為三個部分解析器將模板字符串轉換成優化器對進行靜態節點標記，主要用來做虛擬的渲染優化代碼生成器使用生成函數代碼字符串開始前先解釋一下抽象 20190215問簡述一下Vue.js的template編譯過程？先上一張圖大致看一下整個流程showImg(https://image-static....

NicolasHe 2019-08-23 15:16 評論0 收藏0
JS每日一題:Vue中的diff算法？

摘要：，文本節點的比較，需要修改，則會調用。，新節點沒有子節點，老節點有子節點，直接刪除老節點。所以一句話，的作用主要是為了高效的更新虛擬。 20190125 Vue中的diff算法？概念: diff算法是一種優化手段，將前后兩個模塊進行差異對比，修補(更新)差異的過程叫做patch(打補丁) 為什么vue,react這些框架中都會有diff算法呢? 我們都知道渲染真實dom的開銷是很大的...

Caicloud 2019-08-23 15:32 評論0 收藏0