vue----keep-alive缓存，activated,deactivated两个生命周期函数

Posted 2021-02-10 SRH啦

keep-alive缓存（一般都要将首次创建的组件缓存，提高性能）

    

　　将需要缓存的组件缓存在内存当中，下次再次访问的时候，直接从缓存中读取，而不是重新创建或者销毁……提高了性能

（只要组件会经历创建和销毁(v-if    v-show)的时候，都可以使用keep-alive）
    
 　　如果没有缓存，每点击一次导航，内容区就会创建一个组件，该组件会经历整个生命周期，每点击一次，就会创建一个组件，比较浪费性能，
这时，我们就要考虑到是否能将点击过的已创建的组件进行缓存，当再次点击已访问过的组件时，这时，就会从缓存中获取该组件，而不会重新创建，
这就用到keep-alive
 
用keep-alive 标签包裹component组件标签
<keep-alive>
       <component :is="activeCom"></component>
</keep-alive>

 

keep-alive对应两个生命周期,activated(){}    deactivated(){}

 

当从缓存中读取a组件时，此时a组件处于活跃状态，
当从缓存中读取b组件时，a组件处于缓存状态，此时b组件处于活跃状态，
 
用途：
    eg:当在a组件浏览小说到某个位置，这时，我切换到b组件，那么就用a组件的缓存状态函数记录这个位置（），
当我再次切换到a组件，用活跃状态函数 保存到该位置
        
activated(){
    console.log("活跃状态");
},
deactivated(){
    console.log("缓存状态")
}