文 / 西打藍 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