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

標籤: Vue.js javascript

如果我們利用 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