vue <keep-alive> & <component :is>

組件保留狀態與切換渲染

索引index

component: 切換組件的渲染

keep-alive: 保存切換後的組件狀態(快取)

keep-alive的生命週期: activated() & deactivated()

component

搭配 :is 使用，只會渲染符合:is中符合name的組件

以下範例，透過button來切換compNow的值讓<component>渲染符合compNow的對應組件

keep-alive

<keep-alive></keep-alive>中的會保留住消失的動態component，且不會觸發rerender，因此狀態(data)會被保留；

因為keep-alive使設計來用於保留其單一的子component，所以不適用於v-for相關components

props { 
 include: string | RegExp | array 
 // 用來過濾 include 的component name
 
  exclude: string | RegExp | array
 // 用來過濾 exclude 的component name
 
  max 
 // 保留的component數量
}

keep-alive生命週期：activated() & deactivated()

activated(): 當keep-alive中的component被喚醒時(:is 符合組件名時)觸發

deactivated(): 當keep-alive中的component沈睡時(:is 符合組件名時)觸發

引用/參考，延伸閱讀

keep-alive: https://vuejs.org/v2/api/#keep-alive

component: https://vuejs.org/v2/api/#component

activated / deactivated: https://vuejs.org/v2/api/#activated