談談你對 keep-alive 的了解？

 

在做電商有關的項目中，當我們第一次進入列表頁需要請求一下數據，當我從列表頁進入詳情頁，詳情頁不緩存也需要請求下數據，然后返回列表頁，這時候我們使用keep-alive來緩存組件，防止二次渲染，這樣會大大的節省性能。

 

keep-alive 是 Vue 內置的一個組件，可以使被包含的組件保留狀態，避免重新渲染 ，其有以下特性：

• 一般結合路由和動態組件一起使用，用於緩存組件；
• 提供 include 和 exclude 屬性，兩者都支持字符串或正則表達式， include 表示只有名稱匹配的組件會被緩存，exclude 表示任何名稱匹配的組件都不會被緩存 ，其中 exclude 的優先級比 include 高；
• 對應兩個鈎子函數 activated 和 deactivated ，當組件被激活時，觸發鈎子函數 activated，當組件被移除時，觸發鈎子函數 deactivated。

 1.通常用來包裹組件使用，本身沒有意義，不會產生任何可視的元素，與component一起使用

<keep-alive>
    <component :is="view"></component>
</keep-alive>

 

2.在包裹組件時可以默認緩存組件，所謂緩存組件是指組件會保持一個狀態不變，而不會在切換時重新掛載渲染等

3.props: [include, exclude, max]

• include：  指定緩存的組件，其中指定的是組件的name
• exclude： 指定不緩存某個組件，其中指定的是組件的name
• max：      指定最多緩存多少組件，達到最大值的時候會把最開始緩存的替換掉

 

4.上面緩存可以結合路由來緩存頁面

<keep-alive>
    <router-view></router-view>
</keep-alive>

 

5.在keep-alive包裹下的組件可能會有兩個鈎子函數被觸發

activated：       當前組件處於焦點狀態時會觸發當前鈎子，被緩存的組件可以用此來替代mounted（組件不會重新掛載）。

deactivated：   當前組件失去焦點狀態時觸發。

實例：

<keep-alive include="test-keep-alive">
  <!-- 將緩存name為test-keep-alive的組件 -->
  <component></component>
</keep-alive>

<keep-alive include="a,b">
  <!-- 將緩存name為a或者b的組件，結合動態組件使用 -->
  <component :is="view"></component>
</keep-alive>

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

<!-- 動態判斷 -->
<keep-alive :include="includedComponents">
  <router-view></router-view>
</keep-alive>

<keep-alive exclude="test-keep-alive">
  <!-- 將不緩存name為test-keep-alive的組件 -->
  <component></component>
</keep-alive>

 

結合router，緩存部分頁面

使用$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中設置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 // 需要被緩存
      }
    }
  ]
})

 

 

• keep-alive用法

• <keep-alive>包裹動態組件時,會緩存不活動的組件實例,而不是銷毀它們
• <keep-alive>是一個抽象組件:它自身不會渲染一個DOM元素,也不會出現在父組件鏈中
• 當組件在<keep-alive>內被切換,它的activated和deactivated這兩個生命周期鈎子函數將會被對應執行