vue关于点击详情页面keep-alive的缓存问题
更新时间：2022年06月01日 14:23:17 作者：范天缘
这篇文章主要介绍了vue关于点击详情页面keep-alive的缓存问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
点击详情页面keep-alive的缓存问题
今天有个列表
点击以后 进入详情 然后在返回，再点击其他的列表数据，详情页面请求的还是上一次请求的id 除非刷新才会请求现在的.
这样子对用户体验感是非常不好滴,查了半天资料 发现了activated这个api
解决有些不需要被缓存的组件页面 设置 activated 即可以再次进行事件的响应
vue中路由表单缓存（keep-alive）
vue 中从一个路由切换到另一个路由的时候，第一个路由可能有表单信息，但切换到第二个路由时，第一个路由里的组件会被销毁，表单里填写的 value 也会消失，keep-alive 就可以帮我们缓存我们不想被销毁的组件。
页面效果
父组件代码
<!-- 如果没有 include 属性，那么就会缓存全部子路由组件，这样做是没有必要的，只缓存表单组件即可 --> <keep-alive include='News‘> <!-- 缓存多个组件的写法 --> <!-- <keep-alive :include=['News','Massage']> --> <router-view></router-view> </keep-alive>
被缓存组件代码
<template>
<ul>
<li>news001 <input type='text'></li>
<li>news002 <input type='text'></li>
<li>news003 <input type='text'></li>
</ul>
</template><script>
export default {
name: "News",
};
</script>那么问题来了，如果在缓存组件开一个定时器，那么切换到其他组件定时器永远不会被销毁，这样运行效率会很低，那么这时候我们需要两个新的生命周期函数 activated 与 deactivated
<script>
export default {
name:'News',
data(){
return {
count:0,
}
},
activated(){
this.timer = setInterval(()=>{
this.count++
},20)
},
deactivated(){
clearInterval(this.timer)
}
}
</script>以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
我们都知道,轮播图组件模板结构通常是ul包裹li的结构,在vue中,li的数量也通常是由后端接口返回的数据决定,下面这篇文章主要给大家介绍了关于vue3封装轮播图组件功能的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了用Cordova打包Vue项目的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
基于Vue3+Element Plus 实现多表单校验demo
表单校验在日常的开发需求中是一种很常见的需求,通常在提交表单发起请求前校验用户输入是否符合规则,通常只需formRef.value.validate()即可校验,本文给大家介绍基于Vue3+Element Plus 实现多表单校验demo,感兴趣的朋友一起看看吧2024-06-06
这篇文章主要介绍了vue自定义全局消息框组件问题及解决方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-11-11
这篇文章主要介绍了Vue不能检测到数据变化的几种情况说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
cube-ui 是基于 Vue.js 实现的精致移动端组件库，由于很长一段时间没有学习cube-ui 的功能实现示例代码了，今天通过本文给大家介绍下Vue2使用cube-ui 实现搜索过滤、高亮功能，感兴趣的朋友跟随小编一起看看吧2023-01-01
这篇文章主要介绍了使用elementUI的表格table给列添加样式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了Vue使用vux-ui自定义表单验证遇到的问题及解决方法,需要的朋友可以参考下2018-05-05
本篇文章主要介绍了在Vue中使用Compass的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章主要为大家介绍了vue生成二维码QR Code的实现示例详情，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-04-04
最新评论