keep-alive介绍及应用场景

HTTP keep-alive

项目中使用axios开启 Http Keep-Alive

// 插件
const Agent = require('agentkeepalive')
const keepaliveAgent = new Agent({
  maxSockets: 100,
  maxFreeSockets: 10,
  timeout: 60000,
  freeSocketKeepAliveTimeout: 30000
})

$axios.defaults.httpAgent = keepaliveAgent

Vue keep-alive

props:

• include string或正则，只有名称匹配的组件会被缓存 2.1.0+
• exclude string或正则, 名称匹配的组件不会被缓存 2.1.0+
• max 最多可以缓存多少组件实例 2.5.0+
• activated 和 deactivate 生命周期钩子

<keep-alive include="a,b" :include="['a','b']" :exclude="/a|b/" :max="10">
  <component :is='view'></component>
</keep-alive>

<keep-alive> 不会在函数式组件中正常工作，因为它们没有缓存实例。
结合router,缓存部分页面

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive></router-view

在router/设置route的元信息 meta

routers: [{
  path: '/',
  name: 'Home',
  meta: {
    keepAlive: false // 不需要缓存
  }
},{
  path: '/page',
  name: 'Page',
  meta: {
    keepAlive: true  // 需要缓存
  }
},]

使用keep-alive会将数据保留在内存中，如果每次进入页面的时候要获取最新的数据，需要 在 activated 生命周期中 重新获取数据，承担原来created 钩子中获取数据的任务
设置了keep-alive的组件
第一次进入： beforeRouteEnter => created => ... => activated => ... => deactivated
后续进入：beforeRouteEnter => activated => deactivated,
只有第一次进入该组件时，才会走created钩子，需要缓存的组件中activated时每次都会走的钩子函数

场景 Vue中前进刷新，后退缓存用户浏览数据

列表页面 =>点击进入详情页=> 后退到列表页 要缓存列表原来数据

重新进入列表页面 => 获取最新的数据

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

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

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

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

---

文章参考:https://juejin.im/post/5b2ce07ce51d45588a7dbf76