vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue点击详情页面keep-alive缓存

vue关于点击详情页面keep-alive的缓存问题

作者:范天缘

这篇文章主要介绍了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>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文