[Vue.js] component 狀態保留- keep-alive

如果我們利用 is 切換 componet，預設 componet 會整個更新，也就是說如果我們有更新 component 裡面的資料的話，會被整個刷新成初始狀態，這時我們就可以利用 keep-alive 來幫我們做 cache。

<div @click='countOn()'>shop: {{count}}</div>

countOn(){
      this.count++;
}

像這樣只要有更新資料就會被刷新，為避免這狀況我們利用 keep-alive 把 component 包起來即可。

<keep-alive>
    <component :is="view"></component>
</keep-alive>

而當元件透過 keep-alive 切換時，還會觸發 activated 和 deactivated 這兩個 lifecycle 的 hook function，我們也可以在這些事件發生的時候更新資料。

activated(){
    this.count ++;
  },

完整程式碼：

此外我們還可以設定 includ 或 exclude 去指定或排除要保留資料的 componet，也可以利用 max 指定最大的 cache 量，如果超過設定的值，則會依序刪除 cache 的資料。

詳見 vue: keep-alive