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

目录

• 问题描述：
• 解决方法1
• 解决方法2

问题描述：

有两个页面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函数重复触发解决的资料请关注其它相关文章！

• vue点击弹窗自动触发点击事件的解决办法(模拟场景)
• 解决vue elementUI 使用el-select 时 change事件的触发问题
• 详解vue中在父组件点击按钮触发子组件的事件
• Vue 防止短时间内连续点击后多次触发请求的操作
• 浅谈vue.watch的触发条件是什么
• Vue如何实现自动触发功能

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！