vue——内置组件keep-alive

在项目中，经常用keep-alive来缓存路由组件内部状态的，被keep-alive包裹的组件间的切换将不会触发生命周期钩子的执行。

<keep-alive>
    <router-view></router-view>
</keep-alive>

在被keep-alive包裹的组件，vue提供个特殊的2个生命周期：

（1）activated ——  组件第一次被渲染的时候触发（初始化或者导航之前的切换），也就是从一个组件切换到组件时，触发。

注意：可复用组件之间切换不会触发activated ，如：" /home/1 " 导航到  " /home/2 " , 不会触发activated

（2）deactivated —— 从一个导航切换到另一个导航后，deactivated会被触发。

注意：可复用组件之间切换不会触发deactivated ，如：" /home/1 " 导航到  " /home/2 " , 不会触发deactivated

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

执行顺序：

以下是activated 和 deactivated 钩子与导航守卫以及普通生命周期函数的执行顺序：

 

以下是实操：（不管有没有被缓存，只要第一次进入某一个页面，都会触发生命周期钩子 beforeCreated、created··· ···）