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。


閱讀量




聯絡與合作


有文章撰寫、網站設計(UI/UX)、平面設計、網站工程需求,皆可以來信詢問,在關於下方有參考作品。

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

Email: aaa24295234@gmail.com