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緩存的組件隻會觸發activateddeactivated事件,所以就在這兩個事件觸發時把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函數重復觸發解決的資料請關註WalkonNet其它相關文章!