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>以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了VUE搭建分布式医疗挂号系统的前台预约挂号步骤详情，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-04-04
vue是一种轻巧便捷的框架，那么如何进行对于数据加载的刷新呢？以下就是我对于vue.js数据加载的一点想法2017-06-06
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。本文介绍下Vue Router的安装与使用2021-06-06
这篇文章主要介绍了Vue的土著指令和自定义指令的用法讲解 ,需要的朋友可以参考下2018-02-02
这篇文章主要介绍了vue-cli3.0项目打包后如何修改访问后端地址，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
下面小编就为大家分享一篇vue.js 获取select中的value实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要为大家介绍了Vue3使用Swiper实现轮播图示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要给大家介绍了关于vue+echarts实现折线图的方法与注意事项，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-12-12
这篇文章主要介绍了nuxt 路由、过渡特效、中间件的实现代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
本篇文章主要介绍了在Vue中使用echarts的实例代码（3种图），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
最新评论