vue项目watch内的函数重复触发问题的解决
问题描述:
有两个页面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()
watch: { someValue(newValue, oldValue) { if (this.$route.fullPath === 'A页面路由路径') { // do something } } }
解决方法2
添加一个flag参数来判断页面是否是active状态,使用keep-alive缓存的组件只会触发activated
和deactivated
事件,所以就在这两个事件触发时把flag置为true和false,只有在flag为true的时候才执行getList()
{ data () { return { activatedFlag: false }; }, watch: { 'someValue'(val) { if(val && this.activatedFlag) { this.getlist(); } } }, activated () { this.activatedFlag = true; }, deactivated () { this.activatedFlag = false; } }
如果页面比较多,而且各页面里的函数名称不一致的话,可以把上面代码的watch部分去掉写成一个mixin,在需要的页面引入即可
import activeFlag from "@/mixin/activeFlag"; export default { mixins: [activeFlag], watch: { 'someValue'(val) { if(val && this.activatedFlag) { this.getlistA(); this.getlistB(); } } }, }
以上就是vue项目watch内的函数重复触发问题的两种解决方案的详细内容,更多关于vue watch函数重复触发解决的资料请关注我们其它相关文章!
赞 (0)