keep-alive 用法 及activated,deactivated這兩個生命周期函數

keep-alive
Props：

include - 字符串或正則表達式。只有名稱匹配的組件會被緩存。
exclude - 字符串或正則表達式。任何名稱匹配的組件都不會被緩存。
max - 數字。最多可以緩存多少組件實例。
用法：

<keep-alive> 包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。和 <transition> 相似，<keep-alive> 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現在父組件鏈中。

當組件在 <keep-alive> 內被切換，它的 activated 和 deactivated 這兩個生命周期鈎子函數將會被對應執行。

在 2.2.0 及其更高版本中，activated 和 deactivated 將會在 <keep-alive> 樹內的所有嵌套組件中觸發。

主要用於保留組件狀態或避免重新渲染。

<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>
 
<!-- 多個條件判斷的子組件 -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>
 
<!-- 和 `<transition>` 一起使用 -->
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>
注意，<keep-alive> 是用在其一個直屬的子組件被開關的情形。如果你在其中有 v-for 則不會工作。如果有上述的多個條件性的子元素，<keep-alive> 要求同時只有一個子元素被渲染。

include and exclude

2.1.0 新增

include 和 exclude 屬性允許組件有條件地緩存。二者都可以用逗號分隔字符串、正則表達式或一個數組來表示：

<!-- 逗號分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>
 
<!-- 正則表達式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>
 
<!-- 數組 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>
匹配首先檢查組件自身的 name 選項，如果 name 選項不可用，則匹配它的局部注冊名稱 (父組件 components 選項的鍵值)。匿名組件不能被匹配。

max

2.5.0 新增

最多可以緩存多少組件實例。一旦這個數字達到了，在新實例被創建之前，已緩存組件中最久沒有被訪問的實例會被銷毀掉。

<keep-alive :max="10">
  <component :is="view"></component>
</keep-alive>
<keep-alive> 不會在函數式組件中正常工作，因為它們沒有緩存實例。

 activated,deactivated
        注意一點：activated,deactivated這兩個生命周期函數一定是要在使用了keep-alive組件后才會有的，否則則不存在當引入keep-alive的時候，頁面第一次進入，鈎子的觸發順序created-> mounted-> activated，退出時觸發deactivated。當再次進入（前進或者后退）時，只觸發activated。

        事件掛載的方法等，只執行一次的放在 mounted 中；組件每次進去執行的方法放在 activated 中， activated 中的不管是否需要緩存多會執行。

實例演示：

created() {
    console.log(`我是第一個created`);
},
mounted(){
    console.log(`我是第二個mounted`);
},
activated(){
    console.log(`我是第三個activated`);
    console.log("頁面第一次進入的時候，鈎子觸發的順序是created->mounted->activated",'只要渲染頁面就會被調用');
},
deactivated(){
    console.log("頁面退出的時候會觸發deactivated，當再次前進或者后退的時候只觸發activated");
},
 打印結果為：



看一下退出的效果



OK，完事！剩下就是需要在activated、deactivated 中完成自己的任務邏輯了。
————————————————