在搭建 vue 項目時，有某些組件沒必要多次渲染，所以需要將組件在內存中進行‘持久化'，此時 <keep-alive> 便可以派上用場了。 <keep-alive> 可以使被包含的組件狀態維持不變，即便是組件切換了，其內的狀態依舊維持在內存之中。在下一次顯示時，也不會重現渲染。

PS：<keep-alive> 與 <transition>相似，只是一個抽象組件，它不會在DOM樹中渲染(真實或者虛擬都不會)，也不在父組件鏈中存在，比如：你永遠在 this.$parent 中找不到 keep-alive 。

1. keep-alive的基礎使用

最基礎的一般是結合動態組件去使用：

<keep-alive>  <component :is="currentView"></component></keep-alive>new Vue({  el: '#app',  data(){    return {      currentView: Test //Test為引入的子組件    }  }})

不過此種方式并無太大的實用意義。

2. 生命周期鉤子

被包含在 <keep-alive> 中創建的組件，會多出兩個生命周期的鉤子: activated 與 deactivated

activated

在組件被激活時調用，在組件第一次渲染時也會被調用，之后每次keep-alive激活時被調用。

deactivated

在組件被停用時調用。

注意：只有組件被 keep-alive 包裹時，這兩個生命周期才會被調用，如果作為正常組件使用，是不會被調用，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，這兩個鉤子依然不會被調用！另外在服務端渲染時此鉤子也不會被調用的。

3. 配合router-view使用

有些時候可能需要將整個路由頁面一切緩存下來，也就是將 <router-view> 進行緩存。這種使用場景還是蠻多的。

在vue 2.1.0 之前，大部分是這樣實現的：

<!-- template --><keep-alive>  <router-view v-if="$router.meta.keepAlive"></router-view></keep-alive><router-view v-if="!$router.meta.keepAlive"></router-view>//router配置new Router({  routes: [    {      name: 'a',      path: '/a',      component: A,      meta: {        keepAlive: true      }    },    {      name: 'b',      path: '/b',      component: B    }  ]})

這樣配置路由的路由元信息之后，a路由的 $router.meta.keepAlive 便為 true ，而b路由則為 false 。
所以為 true 的將被包裹在 keep-alive 中，為 false 的則在外層。這樣a路由便達到了被緩存的效果，如果還有想要緩存的路由，只需要在路由元中加入 keepAlive: true