欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue项目watch内的函数重复触发问题的解决

程序员文章站 2022-03-20 14:40:51
问题描述:有两个页面a和b,每个页面里都有一个getlist()方法。这个两个方法都需要传一个相同的参数c,参数c的选择过程又比较麻烦。为了避免在切换a、b两个界面重复选择参数c的问题,我将参数c存入...

问题描述:

有两个页面a和b,每个页面里都有一个getlist()方法。这个两个方法都需要传一个相同的参数c,参数c的选择过程又比较麻烦。为了避免在切换a、b两个界面重复选择参数c的问题,我将参数c存入vuex中,然后在两个页面里都使用watch监听参数c来执行getlist()方法。然后发现一个问题,从a页面进入b页面后,在b页面重新选择参数c,a页面的getlist()方法竟然也会被执行,反之亦然,从b页面到a页面后,在a页面改变参数c也会执行b页面的getlist()方法。

后来发现是使用了因为使用了keep-alive所致,keep-alive会将vue实例始终保持在内存中,因此该vue实例始终存续,相应的watchers始终生效,查找相关资料后,发现许多人也遇到了这个问题,最后找到以下两种解决方案:

解决方法1

通过router路径来判断是否执行getlist()

解决方法2

添加一个flag参数来判断页面是否是active状态,使用keep-alive缓存的组件只会触发activateddeactivated事件,所以就在这两个事件触发时把flag置为true和false,只有在flag为true的时候才执行getlist()

如果页面比较多,而且各页面里的函数名称不一致的话,可以把上面代码的watch部分去掉写成一个mixin,在需要的页面引入即可

以上就是vue项目watch内的函数重复触发问题的两种解决方案的详细内容,更多关于vue watch函数重复触发解决的资料请关注其它相关文章!

相关标签: vue watch 函数