vue中keep-alive详细讲解
Vue 详细 讲解 keep alive
2023-09-27 14:22:17 时间
场景
今天产品跑过来跟我说,
当我在A页面修改数据后,去B页面。
然后返回A页面。希望A页面保留我修改后的数据。
而不是数据又恢复最初的样子了。我心里想,尼玛,又要加班了?
看下面小粒子
数据被被重置的问题
<template>
<div>
<el-button @click="gotosHander">去详情页面</el-button>
<el-button @click="changeHander">改变数据</el-button>
<ul class="box">
<li class="demoli" v-for="(item,index) in list" :key="index">
{{ item.name }}==> {{item.age }}
</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return{
list:[
{name:'张三',age:23},
{name:'李四',age:33},
]
}
},
methods:{
gotosHander(){
this.$router.push("/details")
},
changeHander(){
this.list=[
{name:'何西亚',age:33},
]
}
}
}
</script>
我们发现的问题
在页面更改数据后,我们去详情页面。
在返回上一个页面。数据被重置了。
但是我们并不想数据重置。
想让他保留我们更改后的样子,
怎么办?????
使用keep-alive解决数据被重置
<keep-alive>
<router-view></router-view>
</keep-alive>
在页面中使用一个定时器
<template>
<div>
<el-button @click="gotosHander">去详情页面</el-button>
</div>
</template>
<script>
export default {
data(){
return{
timer:null
}
},
methods:{
gotosHander(){
this.$router.push("/details")
},
},
mounted(){
this.timer=setInterval(()=>{
console.log("@@@@@@@@@@@@@@@@@@@")
},100)
},
beforeDestroy(){
clearInterval(this.timer)
}
}
</script>
keep-alive产生的问题
如果我们在页面中写一个定时器,
那么这个定时器在beforeDestroy中将不会被清除。
也就是说:使用keep-alive后,页面中的beforeDestroy不会被执行
如何让页面中的beforeDestroy被执行
我们可以使用生命周期 activated 和 deactivated
activated是页面或者组件被激活的时候触发该函数,
激活可以理解为展示在页面上的时候。
deactivated是页面别取消隐藏的时候触发该函数
我们从详情页进入该页面的时候,
使用activated函数。因为是展示嘛~
当我们离开该页面的时候触发函数deactivated,因为是隐藏嘛~
从详情页进入该页面
<template>
<div>
<el-button @click="gotosHander">去详情页面</el-button>
</div>
</template>
<script>
export default {
data(){
return{
timer:null
}
},
methods:{
gotosHander(){
this.$router.push("/details")
},
},
mounted(){
this.timer=setInterval(()=>{
console.log("@@@@@@@@@@@@@@@@@@@")
},100)
},
activated(){
console.log("页面被激活的时候触发该函数")
},
deactivated(){
clearInterval(this.timer)
console.log("页面被取消/切换的时候触发该函数")
},
}
</script>
keep-alive的后遗症
刚刚我们说了,使用keep-alive后,默认情况下,
所有页面中的beforeDestroy和destroyed生命周期函数不会被执行了
我的个乖乖~,好可怕!
其实也不是没有办法,只是我们使用include。
include只会缓存与之匹配的值
include的使用
<keep-alive include="yourPageName">
<router-view></router-view>
</keep-alive>
上面这段代码只会缓存【页面、组件】名是yourPageNamede
如果你需要缓存多个页面或者组件。
你可以写成一个数组
<keep-alive :include="['yourPageName','xingqing']">
<router-view></router-view>
</keep-alive>
<template>
<div>
<el-button @click="backHander">返回上一页</el-button>
我是详情页面
</div>
</template>
<script>
export default {
//这个是组件或者页面名。
// 因为include会自动匹配,该组件会被缓存
// 所以销毁的生命周期是不会被执行的
// activated【激活、展示】 和 deactivated【隐藏、离开】会被执行
name:'xingqing',
}
</script>
相关文章
- [转] Vue中异步错误处理
- vue - webpack
- Vue - 满意度调查评价功能,表情图片打分评分组件(非星星评分组件,类似抖音商品满意度好评、中评、差评评价功能)代码干净整洁注释详细无 BUG,无任何第三方插件依赖,完整功能实例源码插件
- Vue - 将 Ajax 异步网络请求改为同步执行,等待 Promise 风格的接口请求完毕再执行后面的代码(适用于 “等待接口数据获取成功后,在执行下面的语句“ 等需求)超详细示例及注释解决方案
- Vue - v-for 循环渲染多个 “重复“ 子组件(仅 ref 不同,this.$refs.xx 使用时依然能准确找到子组件)将子组件 ref 设为动态,这样每个子组件都是 “独立“ 的!详细教程
- Vue - Nuxt.js 安装引入 WangEditor V5 富文本编辑器最新版本,超详细使用教程(Nuxt.js 项目使用官方提供的示例,页面报错,刷新就会报错navigator is解决方案)
- uni-app - H5 页面路由不存在时,跳转到自己定制的 404.vue 页面(当路由不存在时自动重定向到自定义的 404 组件)超详细简约高效的解决方案
- vue和ainapp动态获取数据改变背景颜色
- vue页面传参和接参
- vue开发 ES5——> ES6设置
- Vue 路由(Router)详细介绍(切换,传参,通信)
- vue从入门到进阶:组件Component详解(六)
- Vue知识点总结(4)——v-on(超级详细)
- Vue知识点总结(14)——其它组件通信方式(provide/inject和$parent/$children)(超级详细)
- Vue知识点总结(9)——局部组件的创建和使用(超级详细)
- 【Vue】vue基础语法——自定义指令、过滤、组件和动画(内附详细案例代码)——day04
- Vue+Echarts监控大屏实例十六:Echarts对接天地图插件开发
- 【请收藏】自动化构建部署之Travis CI使用(GitHub/Travis CI/Vue)
- vue做一个多图片上传组件
- vue中router-link的详细用法
- nuxtjs在vue组件中使用window对象编译报错的解决方法
- SpringBoot+Vue实现的高校图书馆管理系统 附带详细运行指导视频
- SpringBoot+Vue实现的在线聊天系统 附带详细运行指导视频
- Vue学习第23天 —— Vuex中getters详细讲解及使用案例,与computed计算属性对比
- vue学习指南:第四篇(详细) - vue的 :class 和 :style
- vue项目 (1) vue结合mini-ui 的使用
- VUE 表单设计器
- vue生命周期的栗子