vue解决多页面组件使用keep-alive而mounted不能多次触发问题
一、需求问题在vue的开发中,我们可能会遇到这样的需求。当在多个页面组件进行切换的时候,并且页面组件使用了Keep-alive的情况下,如果使用mounted()钩子函数去做页面的数据请求,那么只会触发一次。如果下次一些相关的定位信息发生了改变,再次切换页面组件的时候,相关的页面不会再重新发起数据请求,跟随相关的定位信息发生改变。二、需求分析在vue中,keep-alive是能够缓存动态组件...
·
一、需求问题
在vue的开发中,我们可能会遇到这样的需求。当在多个页面组件进行切换的时候,并且页面组件使用了Keep-alive
的情况下,如果使用mounted()
钩子函数去做页面的数据请求,那么只会触发一次。如果下次一些相关的定位信息发生了改变,再次切换页面组件的时候,相关的页面不会再重新发起数据请求,跟随相关的定位信息发生改变。
二、需求分析
在vue中,keep-alive
是能够缓存动态组件的,应用页面也是比较多的。但是如果在切换多页面组件,同时相关定位信息发生改变,数据请求只会请求一次,然后就会被缓存了。这并不是我们所需要的结果。所以,在keep-alive
中,有两个钩子函数,activated()
和 deactivated()
这两个钩子函数。activated()
是keep-alive
组件激活时调用,而 deactivated()
是 keep-alive
组件停用时调用。所以,我们可以使用 activated()
代替 mounted()
, 去作为页面组件切换时使用,进行数据的请求。
三、需求解决
将 mounted()
替换为 activated()
activated() {
this.axios.get('/api/movieComingList?cityId='+cityId).then((res) => {
var msg = res.data.msg;
if ( msg === 'ok') {
this.comingList = res.data.data.comingList;
this.isLoading = false;
}
})
}
更多推荐
已为社区贡献26条内容
所有评论(0)