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

資訊專欄INFORMATION COLUMN

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

fsmStudy / 3066人閱讀

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

20190212問

vue中keepalive怎么理解？

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

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

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

基本使用

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

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

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

deactivated 當keepalive包含的組件銷毀的時候觸發(fā)

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

參數(shù)

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

include 包含的組件

exclude 排除的組件

max 緩存組件的最大值

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

代碼理解

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


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


// 如果同時使用include,exclude,那么exclude優(yōu)先于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
        }
    ]
})
總結(jié)

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

關(guān)于JS每日一題

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

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

點擊加入答題

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

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

相關(guān)文章

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

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

    jubincn 評論0 收藏0

  • JS每日一題: 請簡述一下vuex實現(xiàn)原理

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

    JohnLui 評論0 收藏0

  • JS每日一題：什么情況下適合使合vuex？Vuex使用中有幾個步驟？

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

    wow_worktile 評論0 收藏0

  • JS每日一題：簡述一下Vue.js的template編譯過程？

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

    NicolasHe 評論0 收藏0

  • JS每日一題:Vue中的diff算法？

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

    Caicloud 評論0 收藏0

發(fā)表評論

0條評論

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