vue項目watch內的函數(shù)重復觸發(fā)問題的解決

更新時間：2021年04月09日 10:43:38 作者：liyang

這篇文章主要介紹了vue項目watch內的函數(shù)重復觸發(fā)問題的兩種解決方案，幫助大家更好的理解和學習使用vue，感興趣的朋友可以了解下

問題描述：

有兩個頁面A和B，每個頁面里都有一個getList()方法。這個兩個方法都需要傳一個相同的參數(shù)C，參數(shù)C的選擇過程又比較麻煩。為了避免在切換A、B兩個界面重復選擇參數(shù)C的問題，我將參數(shù)C存入vuex中，然后在兩個頁面里都使用watch監(jiān)聽參數(shù)C來執(zhí)行getList()方法。然后發(fā)現(xiàn)一個問題，從A頁面進入B頁面后，在B頁面重新選擇參數(shù)C，A頁面的getList()方法竟然也會被執(zhí)行，反之亦然，從B頁面到A頁面后，在A頁面改變參數(shù)C也會執(zhí)行B頁面的getList()方法。

后來發(fā)現(xiàn)是使用了因為使用了keep-alive所致，keep-alive會將Vue實例始終保持在內存中，因此該Vue實例始終存續(xù)，相應的watchers始終生效，查找相關資料后，發(fā)現(xiàn)許多人也遇到了這個問題，最后找到以下兩種解決方案：

解決方法1

通過router路徑來判斷是否執(zhí)行getList()

watch: {
        someValue(newValue, oldValue) {
            if (this.$route.fullPath === 'A頁面路由路徑') {
                // do something
            }
        }
    }

解決方法2

添加一個flag參數(shù)來判斷頁面是否是active狀態(tài)，使用keep-alive緩存的組件只會觸發(fā)activated和deactivated事件，所以就在這兩個事件觸發(fā)時把flag置為true和false，只有在flag為true的時候才執(zhí)行getList()

{
  data () {
    return {
      activatedFlag: false
    };
  },
  watch: {
    'someValue'(val) {
      if(val && this.activatedFlag) {
        this.getlist();
      }
    }
  },
  activated () {
    this.activatedFlag = true;
  },
  deactivated () {
    this.activatedFlag = false;
  }
}

如果頁面比較多，而且各頁面里的函數(shù)名稱不一致的話，可以把上面代碼的watch部分去掉寫成一個mixin，在需要的頁面引入即可

  import activeFlag from "@/mixin/activeFlag";

  export default {
    mixins: [activeFlag],
    watch: {
        'someValue'(val) {
          if(val && this.activatedFlag) {
            this.getlistA();
            this.getlistB();
          }
        }
      },
  }

以上就是vue項目watch內的函數(shù)重復觸發(fā)問題的兩種解決方案的詳細內容，更多關于vue watch函數(shù)重復觸發(fā)解決的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: