vue的keep-alive講解

功能簡介

keep-alive是vue2.0加入的一個特性， 能緩存某個組件，或者某個路由。緩存的好處：

1. 節省性能消耗，避免一個組件頻繁從新渲染，節省開支
2. 保存用戶狀態，好比說：咱們在填寫收貨地址的頁面，須要跳轉到另外一個頁面經過定位選擇地址信息再返回繼續填寫，這時候須要緩存收貨地址頁面，避免跳轉頁面致使用戶數據丟失。

基礎方法：

緩存組件，被keep-alive只會渲染一次

<keep-alive>
    <component>
      <!-- 組件將被緩存 -->
    </component>
</keep-alive>

緩存路由，全部在keep-alive標籤下的路由都會被緩存 ：
<keep-alive>
<router-view></router-view>
</keep-alive>

進階用法

有些時候，咱們只須要緩存部分頁面或者某些組件。

方法一：router.mate

在路由裏面配置：

const router = [
        {
            name: 'login',
            path: '/login',
            component: login,
        },
        {
            path: '/createResume',
            name: 'createResume',
            component: createResume,
            meta: {
                isKeepAlive: true
            }
        },
        {
            path: '/test',
            name: 'test',
            component: test,
            meta: {
                isKeepAlive: true
            }
        }
    ]

利用路由元數據配置了一個isKeepAlive，來判斷是否須要緩存該頁面，在應用路由的地方須要作以下改動：

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

這樣設置，test和createResume2 個頁面就會被緩存，而其餘頁面就不會被緩存，在跳轉的時候會被銷燬。

方法二：inlcude/exclude

inlcude包含該組件就緩存，exclude不包含該組件就緩存，兩者均可以用逗號分隔字符串、正則表達式或一個數組來表示：

<keep-alive :include="/mytable | mybuttom/" :exclude="/myselect/">
  <component :is="componentName"></component>
</keep-alive>

咱們看到component是渲染動態組件用的，它渲染的組件跟is後面的組件名稱有關係，當componentName變化是，包含在include裏面的正則表達式：/mytable | mybuttom/裏面的組件會被緩存起來，再次出現時，不會從新created，而不在exclude裏面的組件會被緩存。上面的使用方式對於路由來講，也適用。
注意：全部的匹配都是匹配組件的 name，沒有設置 name 的組件或者路由則不會被匹配

方法三：動態判斷

<keep-alive :include="keepAliveArr">
  <component :is="componentName"></component>
</keep-alive>

咱們只須要動態改變keepAliveArr裏面的值就能動態設置哪些組件或者路由頁面須要緩存了，很靈活。

被緩存組件的鉤子函數

咱們都知道vue組件的生命週期會觸發beforeCreate、created 、beforeMount、 mounted這些鉤子函數，可是被緩存的組件或者頁面在第一次渲染以後，再次進入不會再觸發上面的鉤子函數了，而是觸發activated鉤子函數，能夠將邏輯放到這裏面去作。

同理：離開緩存組件的時候，beforeDestroy和destroyed並不會觸發，可使用deactivated離開緩存組件的鉤子來代替。
更多更細節的講解能夠參考vue的官方文檔:
官方文檔

學習如逆水行舟，不進則退，前端技術飛速發展，若是天天不堅持學習，就會跟不上，我會陪着你們，天天堅持推送博文，跟你們一同進步，但願你們能關注我，第一時間收到最新文章。

公衆號前端每日面試題分享：