February 26, 2020

vue keep-alive:保存組件狀態

避免重複渲染影響效能


文 / 西打藍 Siddharam

vue keep-alive


會用到 vue keep-alive,是因為在執行專案時,有個頁面是會重複切換組件的,因為怕瀏覽器重複渲染而影響效能,所以找來 vue 提供的 keep-alive 來保持組件狀態。使用方法很簡單。



// 組件切換時還能保持狀態

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

...
...

data () {
  return {
    selectedNavBar: 'PlanDetail',
    navbar: [
      { componentName: 'PlanDetail' },
      { componentName: 'ReplaceCase' },
      { componentName: 'ProductDemand' },
      { componentName: 'ProductSpec' }
    ]
  }
}

...
...



除此之外,你還能指定哪些組件要保存狀態、哪些不用,只需要加上 include、exclude。



// 此種寫法表示,只有 PlanDetail、ReplaceCase 兩個組件需要被快取,
// 其他組件則不需要。exclude 作法則反。

<keep-alive include:"PlanDetail, ReplaceCase">
  <component :is="selectedNavBar"></component>
</keep-alive>



因為被快取的組件不會被摧毀,所以也不會觸發 mounted,如果要重新觸發組件的生命週期,可以使用 activated 與 deactivated。


閱讀量




聯絡與合作


訂閱電子報,領「我當前 10+ 以上收入源有哪些」一文。

有文字採訪、網站開發,或是諮詢需求,皆可至個人網站參考作品,並聯繫 IG

或是想分享心情、聊聊天、交朋友,可以來秘密通道找我唷。

Email: frank@siddharam.com