vue keep-alive刷新,vue使用keepalive返回实现局部刷新

　　本文主要介绍了vue关于点击详情页keep-alive的缓存问题，有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。

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

　　今天有一份名单。

　　点击以后进入详情然后在返回，再点击其他的列表数据，详情页面请求的还是上一次请求的id 除非刷新才会请求现在的.

　　这对用户体验非常不好。查了半天资料，发现activated，这个api。

　　解决一些不需要缓存的组件页设置 activated 即可以再次进行事件的响应。

vue中路由表单缓存（keep-alive）

　　在vue中从一个路由切换到另一个路由时，第一个路由可能有表单信息，但是切换到第二个路由时，第一个路由中的组件会被破坏，表单中填写的值会消失。keep-alive可以帮助我们缓存不想被破坏的组件。

页面效果

父组件代码

　　！-如果没有include属性，将缓存所有子路由组件。没有必要这样做，只需缓存表单组件-

　　保持活动状态包括=新闻

　　！-如何缓存多个组件-

　　！- keep-alive :include=[News ， message ]-

　　路由器视图/路由器视图

　　/保持活力

被缓存组件代码

　　模板

　　保险商实验所

　　linews001输入类型=text/li

　　linews002输入类型=text/li

　　linews003输入类型=text/li

　　/ul

　　/模板

　　脚本

　　导出默认值{

　　名称：“新闻”，

　　};

　　/脚本

　　那么问题来了。如果在缓存组件中打开了一个定时器，那么切换到其他组件的定时器将永远不会被销毁，这将使操作效率非常低。此时，我们需要激活和停用两个新的生命周期功能。

　　脚本

　　导出默认值{

　　名称：“新闻”，

　　data(){

　　返回{

　　计数：0，

　　}

　　已激活(){

　　this.timer=setInterval(()={

　　这个.计数

　　},20)

　　停用(){

　　clearInterval(this.timer)

　　}

　　/脚本

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。