原理

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

作用

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

效果

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

參數(shù)Props

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

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

生命周期的變化

1.activated

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

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

2.deactivated

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

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

小知識點：

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

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

3、keep-alive 不會在函數(shù)式組件中正常工作，因為它們沒有緩存實例

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

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

用法

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

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

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

{
      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" />

緩存所有頁面：

在app.vue頁面里加keep-alive

緩存部分頁面：

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

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

總結(jié)

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

最新評論