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

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

 利用include，exclude属性

include属性表示只有name属性为bookLists，bookLists的组件会被缓存，
（注意是组件的名字，不是路由的名字）其它组件不会被缓存exclude属性表示除了name属性为indexLists的组件不会被缓存，其它组件都会被缓存

<keep-alive include="bookLists,bookLists">
      <router-view></router-view>
</keep-alive>
<keep-alive exclude="indexLists">
      <router-view></router-view>
</keep-alive>

利用meta属性

export default[ { path:'/', name:'home', components:Home,  meta:{ keepAlive:true //须要被缓存的组件  }, { path:'/book', name:'book', components:Book,  meta:{ keepAlive:false //不须要被缓存的组件  } ] <keep-alive>
  <router-view v-if="this.$route.meat.keepAlive"></router-view>
  <!--这里是会被缓存的组件-->
</keep-alive>

<keep-alive v-if="!this.$router.meta.keepAlive"></keep-alive>
<!--这里是不会被缓存的组件-->