亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

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

fsmStudy / 3110人閱讀

摘要：?jiǎn)栔性趺蠢斫庹f(shuō)在前面是源碼中實(shí)現(xiàn)的一個(gè)組件感興趣的可以研究源碼什么是我們平時(shí)開(kāi)發(fā)中總有部分組件沒(méi)有必要多次我們需要將組件進(jìn)行持久化，使組件狀態(tài)維持不變，在下一次展示時(shí)，也不會(huì)進(jìn)行重新音譯過(guò)來(lái)就是保持活著所以在中我們可以使用來(lái)進(jìn)行組件緩存基

20190212問(wèn)

vue中keepalive怎么理解？

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

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

keepalive音譯過(guò)來(lái)就是保持活著, 所以在vue中我們可以使用keepalive來(lái)進(jìn)行組件緩存

基本使用

// 被keepalive包含的組件會(huì)被進(jìn)行緩存

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

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

deactivated 當(dāng)keepalive包含的組件銷(xiāo)毀的時(shí)候觸發(fā)

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

參數(shù)

keepalive可以接收3個(gè)屬性做為參數(shù)進(jìn)行匹配對(duì)應(yīng)的組件進(jìn)行緩存

include 包含的組件

exclude 排除的組件

max 緩存組件的最大值

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

代碼理解

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


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


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


// 如果緩存的組件超過(guò)了max設(shè)定的值5，那么將刪除第一個(gè)緩存的組件
配合router使用

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

    



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

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

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

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

注 絕不僅限于完成當(dāng)天任務(wù)，更多是查漏補(bǔ)缺，學(xué)習(xí)群內(nèi)其它同學(xué)優(yōu)秀的答題思路

點(diǎn)擊加入答題

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/101675.html

相關(guān)文章

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

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

    jubincn 評(píng)論0 收藏0

  • JS每日一題: 請(qǐng)簡(jiǎn)述一下vuex實(shí)現(xiàn)原理

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

    JohnLui 評(píng)論0 收藏0

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

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

    wow_worktile 評(píng)論0 收藏0

  • JS每日一題：簡(jiǎn)述一下Vue.js的template編譯過(guò)程？

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

    NicolasHe 評(píng)論0 收藏0

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

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

    Caicloud 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<