keep-alive与activated、deactivated

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.youkuaiyun.com/qq_36608921/article/details/82216617
https://www.cnblogs.com/xjy20170907/p/11388334.html
https://cn.vuejs.org/v2/api/#keep-alive