# keep-alive
作用：缓存组件，如在移动端的列表页，进入详情再退出。
- 项目开发久远，当时这样写了一个，不知道是否真的生效了，可能后来改进了，放在app.vue文件里包裹着router-view生效。【无法复现】
<template>
<keep-alive>
<div id="allmeeting">
......
</div>
</keep-alive>
</template>
- keep-alive一般用于 动态组件 或者router-view
- 借助 beforeRouteEnter 可以根据路由设置什么时候清除缓存，什么时候保存缓存
- activated deactivated两个keep-alive的生命周期钩子处理一些进出的逻辑和数据
- router对应的路由meta设置keepAlive作为一个变量可以在需要的时候动态控制路由的那些缓存哪些不缓存，将组件的name取和router的name一致时，就可以利用name进行动态设置
- keep-alive所包裹的文件最好要设置选项name，否则keep-alive可能无效
- Props
- include - 字符串或正则表达式。只有名称匹配的组件会被缓存
- exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存，exclude优先级大于include
- max - 数字。最多可以缓存多少组件实例，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉
- 匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配
- 当 :include="" 为空字符串时，代表被keep-alive包裹的组件都缓存，当 :include=[] 为空数组时，代表不缓存被keep-alive包裹的组件
- 当组件第一次渲染时activated也会被调用，即beforeCreate -> created -> beforeMount -> mounted -> activated,当跳转另一组件时即当前组件被停用时，则只会调用deactivated，它的beforeDestroy和destroy不会被调用,当再次激活此组件时，则也只会调用activated，其它钩子函数也不会调用
这是一个router-view里的一个路由
<template>
<div class='oawrap'>
<div class='container'>
<el-form :model="queryParams" ref="queryForm" :inline="true">
<el-form-item label="任务名称" >
<el-input
v-model="queryParams.taskname"
placeholder="请输入任务名称"
clearable
/>
</el-form-item>
</el-form>
<el-table
v-loading="tableloading"
:data="tableArr"
>
<el-table-column prop="menuName" label="操作" :show-overflow-tooltip="true" >
<template>
<el-button @click='detail'>查看</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
name:'Task',
data() {
return {
queryParams:{
taskname:'',
person:''
},
tableloading:false,
tableArr:[{
menuName:1
}]
}
},
mounted(){
console.log("keepalive")
},
beforeRouteEnter(to, from, next) {
console.log(to)
console.log(from,'from')
next(vm => {
// 如果在子页面刷新了，那其实回来也需要重新init数据
//那么可以设置一个变量去监控，如果刷新，这个变量就重置了
if((from.name === 'Sign'||from.name === 'Contract')&&vm.$store.state.cache==true){
// 缓存不做处理
}else{
vm.init()
}
});
},
activated(v){
console.log('activated')
},
deactivated(){
console.log('deactivated')
},
methods: {
init() {
},
reset(){
this.queryParams={
taskname:'',
person:''
}
this.init()
},
detail(){
this.$router.push('/taskperformance/taskdetail')
}
},
}
</script>
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<keep-alive :include="x">
<router-view/>
</keep-alive>
<button @click='add'>add</button>
</div>
</template>
<script type="text/javascript">
export default{
data(){
return {
x:[]
}
},
methods:{
add(){
this.x=['Home']
}
}
}
</script>