keep-alive與activated
keep-alive
使用<component v-bind:is="currentTabComponent"></component>來切換不同的組件時，有時會想保持這些組件的狀態，以避免反覆重渲染導致的性能問題。這時就可以用 元素將其動態組件包裹起來。
<keep-alive>
<component v-bind:is="currentTabComponent"></component>
</keep-alive>
包裹動態組件時，會緩存不活動的組件實例，而不是銷燬它們。 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現在父組件鏈中。當組件在 內被切換，它的 activated 和 deactivated 這兩個生命週期鉤子函數將會被對應執行。
activated：在vue對象存活的情況下，進入當前存在activated()函數的頁面時，一切到改頁面就觸發。
有的時候我們的頁面在每次切換時需要重新請求數據。當第一次切換到組件A時，組件A的created、mounted、activated生命週期函數都會被執行，但是頁面切換是不會觸發created、mounted的，這時就需要使用activated。在切換到組件B，這時組件A的deactivated的生命週期函數會被觸發；在切換回組件A，組件A的activated生命週期函數會被觸發。
deactivated
當離開組件A，切到組件B之前，需要對組件A做某些處理，比如清除定時器，這時就需要使用deactivated。
參考：
https://blog.csdn.net/qq_36608921/article/details/82216617
https://www.cnblogs.com/xjy20170907/p/11388334.html
https://cn.vuejs.org/v2/api/#keep-alive