vue項目watch內(nèi)的函數(shù)重復(fù)觸發(fā)問題的解決
問題描述：
有兩個頁面A和B，每個頁面里都有一個getList()方法。這個兩個方法都需要傳一個相同的參數(shù)C，參數(shù)C的選擇過程又比較麻煩。為了避免在切換A、B兩個界面重復(fù)選擇參數(shù)C的問題，我將參數(shù)C存入vuex中，然后在兩個頁面里都使用watch監(jiān)聽參數(shù)C來執(zhí)行getList()方法。然后發(fā)現(xiàn)一個問題，從A頁面進(jìn)入B頁面后，在B頁面重新選擇參數(shù)C，A頁面的getList()方法竟然也會被執(zhí)行，反之亦然，從B頁面到A頁面后，在A頁面改變參數(shù)C也會執(zhí)行B頁面的getList()方法。
后來發(fā)現(xiàn)是使用了因為使用了keep-alive所致，keep-alive會將Vue實例始終保持在內(nèi)存中，因此該Vue實例始終存續(xù)，相應(yīng)的watchers始終生效，查找相關(guān)資料后，發(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內(nèi)的函數(shù)重復(fù)觸發(fā)問題的兩種解決方案的詳細(xì)內(nèi)容，更多關(guān)于vue watch函數(shù)重復(fù)觸發(fā)解決的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
element-ui中table組件的toggleRowSelection()方法使用
這篇文章主要介紹了element-ui中table組件的toggleRowSelection()方法使用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
大家在做vue開發(fā)過程中經(jīng)常遇到父組件需要調(diào)用子組件方法或者子組件需要調(diào)用父組件的方法的情況,這篇文章主要給大家介紹了關(guān)于Vue子組件調(diào)用父組件事件的3種方法,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了Vue.delete()刪除對象的屬性說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue+ElementUI實現(xiàn)動態(tài)更換任意主題色(動態(tài)換膚)的全過程
眾所周知Element-UI有換膚功能,下面這篇文章主要給大家介紹了關(guān)于Vue+ElementUI實現(xiàn)動態(tài)更換任意主題色(動態(tài)換膚)的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue.js模版插值的原理與實現(xiàn)方法,結(jié)合實例形式簡單分析了vue.js模板插值的基本功能、原理、實現(xiàn)方法與注意事項,需要的朋友可以參考下2023-04-04
Vue.js?的計算屬性和偵聽器詳解(提升數(shù)據(jù)處理與交互的關(guān)鍵工具)
在Vue.js開發(fā)中,計算屬性與偵聽器是極為關(guān)鍵的特性,它們極大地提升了數(shù)據(jù)處理與交互邏輯實現(xiàn)的便捷性和高效性,本文給大家介紹Vue.js?的計算屬性和偵聽器：提升數(shù)據(jù)處理與交互的關(guān)鍵工具,感興趣的朋友一起看看吧2025-04-04
Vue中關(guān)閉當(dāng)前頁面的方法與原生JavaScript類似,都是通過window對象的close方法實現(xiàn),這篇文章主要介紹了Vue關(guān)閉當(dāng)前頁面的方法,需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細(xì)介紹了Vue2如何集成Lodop插件實現(xiàn)在線打印功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-03-03
vue新玩法VueUse工具庫具體用法@vueuse/core詳解
這篇文章主要介紹了vue新玩法VueUse-工具庫@vueuse/core,VueUse不是Vue.use，它是一個基于?Composition?API?的實用函數(shù)集合，下面是具體的一些用法，需要的朋友可以參考下2022-08-08
本篇文章主要介紹了Vue.js學(xué)習(xí)筆記之修飾符，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07