什么是 keep-alive

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

也就是說，keepalive 是 Vue 內(nèi)置的一個(gè)組件，可以使被包含的組件保留狀態(tài)，或避免重新渲染 。也就是所謂的組件緩存

<keep-alive>是Vue的內(nèi)置組件，能在組件切換過程中將狀態(tài)保留在內(nèi)存中，防止重復(fù)渲染DOM。

<keep-alive> 包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷毀它們。和 <transition> 相似，<keep-alive> 是一個(gè)抽象組件：它自身不會(huì)渲染一個(gè) DOM 元素，也不會(huì)出現(xiàn)在父組件鏈中。

prop:

• include: 字符串或正則表達(dá)式。只有匹配的組件會(huì)被緩存。
• exclude: 字符串或正則表達(dá)式。任何匹配的組件都不會(huì)被緩存。

keep-alive的聲明周期執(zhí)行

• 頁面第一次進(jìn)入，鉤子的觸發(fā)順序

created-> mounted-> activated，
退出時(shí)觸發(fā) deactivated 當(dāng)再次進(jìn)入（前進(jìn)或者后退）時(shí)，只觸發(fā) activated

• 事件掛載的方法等，只執(zhí)行一次的放在 mounted 中；組件每次進(jìn)去執(zhí)行的方法放在 activated 中；

基本用法

<!--被keepalive包含的組件會(huì)被緩存-->
<keep-alive>
    <component><component />
</keep-alive>

被keepalive包含的組件不會(huì)被再次初始化，也就意味著不會(huì)重走生命周期函數(shù)
但是有時(shí)候是希望我們緩存的組件可以能夠再次進(jìn)行渲染，這時(shí) Vue 為我們解決了這個(gè)問題
被包含在 keep-alive 中創(chuàng)建的組件，會(huì)多出兩個(gè)生命周期的鉤子: activated 與 deactivated：

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

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

參數(shù)理解

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

• include 包含的組件(可以為字符串，數(shù)組，以及正則表達(dá)式,只有匹配的組件會(huì)被緩存)
• exclude 排除的組件(以為字符串，數(shù)組，以及正則表達(dá)式,任何匹配的組件都不會(huì)被緩存)
• max 緩存組件的最大值(類型為字符或者數(shù)字,可以控制緩存組件的個(gè)數(shù))

注：當(dāng)使用正則表達(dá)式或者數(shù)組時(shí)，一定要使用 v-bind

<!-- 將（只）緩存組件name為a或者b的組件, 結(jié)合動(dòng)態(tài)組件使用 -->
<keep-alive include="a,b">
  <component></component>
</keep-alive>

<!-- 組件name為c的組件不緩存(可以保留它的狀態(tài)或避免重新渲染) -->
<keep-alive exclude="c"> 
  <component></component>
</keep-alive>

<!-- 使用正則表達(dá)式，需使用v-bind -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 動(dòng)態(tài)判斷 -->
<keep-alive :include="includedComponents">
  <router-view></router-view>
</keep-alive>

<!-- 如果同時(shí)使用include,exclude,那么exclude優(yōu)先于include， 下面的例子只緩存a組件 -->
<keep-alive include="a,b" exclude="b"> 
  <component></component>
</keep-alive>

<!-- 如果緩存的組件超過了max設(shè)定的值5，那么將刪除第一個(gè)緩存的組件 -->
<keep-alive exclude="c" max="5"> 
  <component></component>
</keep-alive>

參考 前端vue面試題詳細(xì)解答

遇見vue-router 結(jié)合router使用，緩存部分頁面

所有路徑下的視圖組件都會(huì)被緩存

<keep-alive>
    <router-view>
        <!-- 所有路徑匹配到的視圖組件都會(huì)被緩存！ -->
    </router-view>
</keep-alive>

如果只想要router-view里面的某個(gè)組件被緩存，怎么辦？

• 使用 include/exclude
• 使用 meta 屬性

1、用 include (exclude例子類似)

缺點(diǎn)：需要知道組件的 name，項(xiàng)目復(fù)雜的時(shí)候不是很好的選擇

<keep-alive include="a">
    <router-view>
        <!-- 只有路徑匹配到的 include 為 a 組件會(huì)被緩存 -->
    </router-view>
</keep-alive>

2、使用 meta 屬性

優(yōu)點(diǎn)：不需要例舉出需要被緩存組件名稱
使用$route.meta的keepAlive屬性：

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

需要在router中設(shè)置router的元信息meta：

//...router.js
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello,
      meta: {
        keepAlive: false // 不需要緩存
      }
    },
    {
      path: '/page1',
      name: 'Page1',
      component: Page1,
      meta: {
        keepAlive: true // 需要被緩存
      }
    }
  ]
})

【加鹽】使用 router.meta 拓展

• 需求：

  • 默認(rèn)顯示 A
  • B 跳到 A，A 不刷新
  • C 跳到 A，A 刷新

• 實(shí)現(xiàn)方式

  • 在 A 路由里面設(shè)置 meta 屬性：

{
        path: '/',
        name: 'A',
        component: A,
        meta: {
            keepAlive: true // 需要被緩存
        }
}

在 B 組件里面設(shè)置 beforeRouteLeave：

export default {
        data() {
            return {};
        },
        methods: {},
        beforeRouteLeave(to, from, next) {
             // 設(shè)置下一個(gè)路由的 meta
            to.meta.keepAlive = true;  // 讓 A 緩存，即不刷新
            next();
        }
};

在 C 組件里面設(shè)置 beforeRouteLeave：

export default {
        data() {
            return {};
        },
        methods: {},
        beforeRouteLeave(to, from, next) {
            // 設(shè)置下一個(gè)路由的 meta
            to.meta.keepAlive = false; // 讓 A 不緩存，即刷新
            next();
        }
};

這樣便能實(shí)現(xiàn) B 回到 A，A 不刷新；而 C 回到 A 則刷新。

防坑指南

1.keep-alive 先匹配被包含組件的 name 字段，如果 name 不可用，則匹配當(dāng)前組件 components 配置中的注冊(cè)名稱。
2.keep-alive 不會(huì)在函數(shù)式組件中正常工作，因?yàn)樗鼈儧]有緩存實(shí)例。
3.當(dāng)匹配條件同時(shí)在 include 與 exclude 存在時(shí)，以 exclude 優(yōu)先級(jí)最高(當(dāng)前vue 2.4.2 version)。比如：包含于排除同時(shí)匹配到了組件A，那組件A不會(huì)被緩存。
4.包含在 keep-alive 中，但符合 exclude ，不會(huì)調(diào)用 activated 和 deactivated。

實(shí)現(xiàn)前進(jìn)刷新，后退不刷新

感謝 iceuncle 分享的 《vue實(shí)現(xiàn)前進(jìn)刷新，后退不刷新》。

總結(jié)

路由大法不錯(cuò)，不需要關(guān)心哪個(gè)頁面跳轉(zhuǎn)過來的，只要 router.go(-1) 就能回去，不需要額外參數(shù)。

在非單頁應(yīng)用的時(shí)候，keep-alive 并不能有效的緩存了= =

keep-alive生命周期鉤子函數(shù)：activated、deactivated

使用<keep-alive>會(huì)將數(shù)據(jù)保留在內(nèi)存中，如果要在每次進(jìn)入頁面的時(shí)候獲取最新的數(shù)據(jù)，需要在activated階段獲取數(shù)據(jù)，承擔(dān)原來created鉤子中獲取數(shù)據(jù)的任務(wù)。

附錄

生命周期函數(shù)：就是vue在某個(gè)時(shí)間段會(huì)自動(dòng)執(zhí)行的函數(shù)

beforeCreate(){}在執(zhí)行的時(shí)候，data還有methods都沒有被初始化

created(){} data還有methods都被初始化好了，如果要調(diào)用 methods 方法或者操作 data 里面的數(shù)據(jù)，最早只能在 created 里面進(jìn)行操作。

beforeMount(){} 表示模板已經(jīng)在內(nèi)存中編輯完成了，但是尚未渲染到模板頁面中。即頁面中的元素，沒有被真正的替換過來，只是之前寫的一些模板字符串。

mounted(){} 表示內(nèi)存中模板已經(jīng)真實(shí)的掛載到頁面中去了，用戶可以看到渲染好的界面了

注意這是一個(gè)生命周期函數(shù)的最后一個(gè)函數(shù)了，執(zhí)行完這個(gè)函數(shù)表示 整個(gè)vue實(shí)例已經(jīng)初始化完成了，組件脫離了創(chuàng)建階段，進(jìn)入運(yùn)行階段。

下面是運(yùn)行期間的兩個(gè)生命周期函數(shù)的鉤子：

beforeUpdate(){} 表示我們的界面還沒更新 但是data里面的數(shù)據(jù)是最新的。即頁面尚未和最新的data里面的數(shù)據(jù)保持同步。

updated(){} 表示頁面和data里面的數(shù)據(jù)已經(jīng)保持同步了 都是最新的。

beforeDestory(){} 當(dāng)執(zhí)行這個(gè)生命周期鉤子的時(shí)候 vue的實(shí)例從運(yùn)行階段進(jìn)入銷毀階段 此時(shí)實(shí)例身上的data 還有 methods處于可用的狀態(tài)。

destoryed(){} 表示組件已經(jīng)完全被銷毀了 組件中所有的實(shí)例方法都是不能用了

到此這篇關(guān)于說說你對(duì)Vue的keep-alive的理解的文章就介紹到這了,更多相關(guān)Vue keep-alive內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論