keep-alive

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

1 利用include 和 exclude 属性设置

// include 和 exclude 属性允许组件有条件地缓存,匹配检查组件自身的 name 选项(注意是组件的名字，不是路由的名字)。如缓存的路由组件里某个不想缓存的子组件可以用exclude排除掉

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

2 利用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>
<!--这里是不会被缓存的组件-->

添加两个生命周期

添加keep-alive后会增加两个生命周期 activated 和 deactivated。

当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated（不会触发created 和 mounted）。

设置了keep-alive的组件

第一次进入： beforeRouteEnter => created => ... => activated => ... => deactivated
后续进入：beforeRouteEnter => activated => deactivated,

使用场景

如果未使用keep-alive组件，则在页面回退时仍然会重新渲染页面，触发created钩子，使用体验不好

场景 Vue中前进刷新，后退缓存用户浏览数据；
列表页面 =>点击进入详情页=> 后退到列表页 要缓存列表原来数据；
重新进入列表页面 => 获取最新的数据；

// router.js
{
  path: '/list',
  name: 'List',
  component: List,
  meta: {
    isUseCache: false, // 默认不缓存
    keepAlive: true  // 是否使用 keep-alive
  }
}

// 列表页面的activated
activated() {
 if(!this.$route.meta.isUseCache){ //isUseCache 时添加中router中的元信息，判读是否要缓存
    this.list = [] //清空原有数据
    this.onload() // 重新加载
  }
 this.$route.meta.isUseCache = false // 通过这个控制刷新
}

// 列表页面跳转到 详情页时，设置需要缓存
beforeRouteLeave(to, from, next){
  if(to.name=='Detail'){
    from.meta.isUseCache = true
  }
  next()
}

判断路由前进后退

let toDepth = to.path.split('/').length
let fromDepth = from.path.split('/').length
if (toDepth < fromDepth) {
  // console.log('back...')
  from.meta.keepAlive = false
  to.meta.keepAlive = true
}