码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-02-22 10:29:32      阅读:336      评论:0      收藏:0      [点我收藏+]

标签:就会   直接   保存   cti   而不是   dea   -keep   span   存在   

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("缓存状态") }

 

    

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

标签:就会   直接   保存   cti   而不是   dea   -keep   span   存在   

原文地址:https://www.cnblogs.com/SRH151219/p/10416680.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!