原理

我們知道vue是通過(guò)vnode實(shí)現(xiàn)保存節(jié)點(diǎn)的，而keep-alive本身也是通過(guò)保存vnode來(lái)實(shí)現(xiàn)緩存的，而不是直接存儲(chǔ)DOM結(jié)構(gòu)。其實(shí)就是將需要緩存的VNode節(jié)點(diǎn)保存在this.cache中，在render時(shí),如果VNode的name符合在緩存條件（可以用include以及exclude控制），則會(huì)從this.cache中取出之前緩存的VNode實(shí)例進(jìn)行渲染

作用

keep-alive組件是vue2.0提供的一個(gè)緩存組件，在組件切換過(guò)程中把切換出去的組件保留在內(nèi)存中，防止重復(fù)渲染DOM，減少加載時(shí)間及性能消耗，提高用戶體驗(yàn)性

效果

keep-alive組件，只要將子組件嵌套在這里面就可以實(shí)現(xiàn)組件的緩存，當(dāng)頁(yè)面返回時(shí)數(shù)據(jù)不會(huì)丟失，實(shí)現(xiàn)了我們常見的歷史頁(yè)面不刷新的效果

參數(shù)Props

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

// 只緩存組件name為a或者b的組件
<keep-alive include="a,b"> 
  <component />
</keep-alive>
?
// 組件name為c的組件不緩存(可以保留它的狀態(tài)或避免重新渲染)
<keep-alive exclude="c"> 
  <component />
</keep-alive>
?
// 如果同時(shí)使用include,exclude,那么exclude優(yōu)先于include， 下面的例子只緩存a組件
<keep-alive include="a,b" exclude="b"> 
  <component />
</keep-alive>
?
// 如果緩存的組件超過(guò)了max設(shè)定的值5，那么將刪除第一個(gè)緩存的組件
<keep-alive exclude="c" max="5"> 
  <component />
</keep-alive>

生命周期的變化

1.activated

• 在 keep-alive 組件激活時(shí)調(diào)用
• 該鉤子函數(shù)在服務(wù)器端渲染期間不被調(diào)用
• 使用 keep-alive 會(huì)將數(shù)據(jù)保留在內(nèi)存中，如果要在每次進(jìn)入頁(yè)面的時(shí)候獲取最新的數(shù)據(jù)，需要在 activated 階段獲取數(shù)據(jù)，承擔(dān)原來(lái) created 鉤子函數(shù)中獲取數(shù)據(jù)的任務(wù)。

activated(){
    /** 
     * 緩存的組件點(diǎn)擊時(shí)調(diào)用
    */
  },

2.deactivated

• 在 keep-alive 組件停用時(shí)調(diào)用
• 該鉤子函數(shù)在服務(wù)器端渲染期間不被調(diào)用
• 被包含在 keep-alive 中創(chuàng)建的組件，會(huì)多出兩個(gè)生命周期的鉤子: activated 與 deactivated

deactivated(){
    /** 
     * 緩存的組件點(diǎn)擊時(shí)調(diào)用
    */
  },

小知識(shí)點(diǎn)：

1、同時(shí)使用include，exclude，那么exclude優(yōu)先于include

2、緩存的組件超過(guò)了max設(shè)定的值5，那么將刪除第一個(gè)緩存的組件

3、keep-alive 不會(huì)在函數(shù)式組件中正常工作，因?yàn)樗鼈儧](méi)有緩存實(shí)例

4、keep-alive 先匹配被包含組件的 name 字段，如果 name 不可用，則匹配當(dāng)前組件 components 配置中的注冊(cè)名稱

5、只有組件被 keep-alive 包裹時(shí)，這兩個(gè)生命周期函數(shù)才會(huì)被調(diào)用，如果作為正常組件使用，是不會(huì)被調(diào)用的，以及在 2.1.0 版本之后，包含在 keep-alive 中，但符合 exclude ，不會(huì)調(diào)用activated和 deactivated這兩個(gè)函數(shù)鉤子！另外，在服務(wù)端渲染時(shí)，此鉤子函數(shù)也不會(huì)被調(diào)用

用法

1.與include結(jié)合使用

// include 只緩存組件名字為home的組件，其他組件不會(huì)緩存，而exclude恰好相反
<keep-alive include="home">
   <router-view />
</keep-alive>

2.結(jié)合Router中的meta屬性來(lái)控制組件緩存

{
      path: '/',
      name: 'home',
      meta:{
        keepAlive:true // 需要緩存
      },
      component: Home,
      children: [
        {
          path: 'goods',
          name: 'goods',
          component: Goods,
          meta: {
        	keepAlive: false // 不需要緩存
      	  }
        }
      ]
    }

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

緩存所有頁(yè)面：

在app.vue頁(yè)面里加keep-alive

緩存部分頁(yè)面：

1、在app.vue頁(yè)面里加keep-alive，結(jié)合keep-alive的include屬性

2、結(jié)合Router中的meta屬性，在app.vue頁(yè)面里加$route.meta.keepAlive的if判斷

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論