1、爲什麼要使用 keep-alive?
在各個頁面之間進行跳轉的時候，回到之前瀏覽過的頁面，此時是會重新進行渲染、重新創建組件，頁面也不是停留在剛纔停留的位置。那麼，能不能在回到瀏覽過的頁面時，還停留在剛剛瀏覽的位置呢？再次進行組件的創建和渲染，也會造成一定的性能消耗。
而keep-alive就是應運而生的這麼一個組件。其主要用於保留組件狀態或避免重新渲染
2、keep-alive 屬性
- include - 字符串或正則表達式。只有名稱匹配的組件會被緩存。
- exclude - 字符串或正則表達式。任何名稱匹配的組件都不會被緩存。
- max - 數字。最多可以緩存多少組件實例
3、keep-alive 的用法
傳送門，去往官方對於 keep-alive 用法示例 → keep-alive
<keep-alive>包裹動態組件時，會緩存不活動的組件實例，而不是銷燬它們。和 <transition>相似，<keep-alive>是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現在組件的父組件鏈中。
當組件在 <keep-alive>內被切換，它的 activated和 deactivated這兩個生命週期鉤子函數將會被對應執行。
我們之前曾經在一個多標籤的界面中使用 isattribute 來切換不同的組件：
<component v-bind:is="currentTabComponent"></component>
當在這些組件之間切換的時候，你有時會想保持這些組件的狀態，以避免反覆重渲染導致的性能問題
你會注意到，如果你選擇了一篇文章，切換到 Archive 標籤，然後再切換回 Posts，是不會繼續展示你之前選擇的文章的。這是因爲你每次切換新標籤的時候，Vue 都創建了一個新的 currentTabComponent實例。
重新創建動態組件的行爲通常是非常有用的，但是在這個案例中，我們更希望那些標籤的組件實例能夠被在它們第一次被創建的時候緩存下來。爲了解決這個問題，我們可以用一個 元素將其動態組件包裹起來。
<!-- 失活的組件將會被緩存！-->
<keep-alive>
<component v-bind:is="currentTabComponent"></component>
</keep-alive>
注意這個 <keep-alive>要求被切換到的組件都有自己的名字，不論是通過組件的 name 選項還是局部/全局註冊。
4、keep-alive 鉤子函數
- activated
- deactivated
activated
官方解釋:
被 keep-alive 緩存的組件激活時調用。
該鉤子在服務器端渲染期間不被調用。
通俗解釋：
在這個組件第一次被加載的時候，是不會觸發。渲染之後會將當前頁面進行緩存，只有離開後再次進入這個組件纔會觸發此鉤子函數.意爲 活躍組件
deactivated
官方解釋:
被 keep-alive 緩存的組件停用時調用。
該鉤子在服務器端渲染期間不被調用。
通俗解釋 ：
在這個組件第一次被加載的時候，是不會觸發。只有從當前組件離開，纔會觸發此鉤子函數。意爲 失活組件