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 // 通过这个控制刷新
}
