vue項(xiàng)目watch內(nèi)的函數(shù)重復(fù)觸發(fā)問(wèn)題的解決
問(wèn)題描述：
有兩個(gè)頁(yè)面A和B，每個(gè)頁(yè)面里都有一個(gè)getList()方法。這個(gè)兩個(gè)方法都需要傳一個(gè)相同的參數(shù)C，參數(shù)C的選擇過(guò)程又比較麻煩。為了避免在切換A、B兩個(gè)界面重復(fù)選擇參數(shù)C的問(wèn)題，我將參數(shù)C存入vuex中，然后在兩個(gè)頁(yè)面里都使用watch監(jiān)聽(tīng)參數(shù)C來(lái)執(zhí)行getList()方法。然后發(fā)現(xiàn)一個(gè)問(wèn)題，從A頁(yè)面進(jìn)入B頁(yè)面后，在B頁(yè)面重新選擇參數(shù)C，A頁(yè)面的getList()方法竟然也會(huì)被執(zhí)行，反之亦然，從B頁(yè)面到A頁(yè)面后，在A頁(yè)面改變參數(shù)C也會(huì)執(zhí)行B頁(yè)面的getList()方法。
后來(lái)發(fā)現(xiàn)是使用了因?yàn)槭褂昧薻eep-alive所致，keep-alive會(huì)將Vue實(shí)例始終保持在內(nèi)存中，因此該Vue實(shí)例始終存續(xù)，相應(yīng)的watchers始終生效，查找相關(guān)資料后，發(fā)現(xiàn)許多人也遇到了這個(gè)問(wèn)題，最后找到以下兩種解決方案：
解決方法1
通過(guò)router路徑來(lái)判斷是否執(zhí)行getList()
watch: {
someValue(newValue, oldValue) {
if (this.$route.fullPath === 'A頁(yè)面路由路徑') {
// do something
}
}
}
解決方法2
添加一個(gè)flag參數(shù)來(lái)判斷頁(yè)面是否是active狀態(tài)，使用keep-alive緩存的組件只會(huì)觸發(fā)activated和deactivated事件，所以就在這兩個(gè)事件觸發(fā)時(shí)把flag置為true和false，只有在flag為true的時(shí)候才執(zhí)行getList()
{
data () {
return {
activatedFlag: false
};
},
watch: {
'someValue'(val) {
if(val && this.activatedFlag) {
this.getlist();
}
}
},
activated () {
this.activatedFlag = true;
},
deactivated () {
this.activatedFlag = false;
}
}
如果頁(yè)面比較多，而且各頁(yè)面里的函數(shù)名稱(chēng)不一致的話，可以把上面代碼的watch部分去掉寫(xiě)成一個(gè)mixin，在需要的頁(yè)面引入即可
import activeFlag from "@/mixin/activeFlag";
export default {
mixins: [activeFlag],
watch: {
'someValue'(val) {
if(val && this.activatedFlag) {
this.getlistA();
this.getlistB();
}
}
},
}
以上就是vue項(xiàng)目watch內(nèi)的函數(shù)重復(fù)觸發(fā)問(wèn)題的兩種解決方案的詳細(xì)內(nèi)容，更多關(guān)于vue watch函數(shù)重復(fù)觸發(fā)解決的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
element-ui中table組件的toggleRowSelection()方法使用
這篇文章主要介紹了element-ui中table組件的toggleRowSelection()方法使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue子組件調(diào)用父組件事件的3種方法實(shí)例
大家在做vue開(kāi)發(fā)過(guò)程中經(jīng)常遇到父組件需要調(diào)用子組件方法或者子組件需要調(diào)用父組件的方法的情況,這篇文章主要給大家介紹了關(guān)于Vue子組件調(diào)用父組件事件的3種方法,需要的朋友可以參考下2024-01-01
Vue.delete()刪除對(duì)象的屬性說(shuō)明
這篇文章主要介紹了Vue.delete()刪除對(duì)象的屬性說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue+ElementUI實(shí)現(xiàn)動(dòng)態(tài)更換任意主題色(動(dòng)態(tài)換膚)的全過(guò)程
眾所周知Element-UI有換膚功能,下面這篇文章主要給大家介紹了關(guān)于Vue+ElementUI實(shí)現(xiàn)動(dòng)態(tài)更換任意主題色(動(dòng)態(tài)換膚)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
vue.js模版插值的原理與實(shí)現(xiàn)方法簡(jiǎn)析
這篇文章主要介紹了vue.js模版插值的原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式簡(jiǎn)單分析了vue.js模板插值的基本功能、原理、實(shí)現(xiàn)方法與注意事項(xiàng),需要的朋友可以參考下2023-04-04
Vue.js?的計(jì)算屬性和偵聽(tīng)器詳解(提升數(shù)據(jù)處理與交互的關(guān)鍵工具)
在Vue.js開(kāi)發(fā)中,計(jì)算屬性與偵聽(tīng)器是極為關(guān)鍵的特性,它們極大地提升了數(shù)據(jù)處理與交互邏輯實(shí)現(xiàn)的便捷性和高效性,本文給大家介紹Vue.js?的計(jì)算屬性和偵聽(tīng)器：提升數(shù)據(jù)處理與交互的關(guān)鍵工具,感興趣的朋友一起看看吧2025-04-04
Vue中關(guān)閉當(dāng)前頁(yè)面的方法與原生JavaScript類(lèi)似,都是通過(guò)window對(duì)象的close方法實(shí)現(xiàn),這篇文章主要介紹了Vue關(guān)閉當(dāng)前頁(yè)面的方法,需要的朋友可以參考下2023-09-09
Vue2集成Lodop插件實(shí)現(xiàn)在線打印功能
這篇文章主要為大家詳細(xì)介紹了Vue2如何集成Lodop插件實(shí)現(xiàn)在線打印功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-03-03
vue新玩法VueUse工具庫(kù)具體用法@vueuse/core詳解
這篇文章主要介紹了vue新玩法VueUse-工具庫(kù)@vueuse/core,VueUse不是Vue.use，它是一個(gè)基于?Composition?API?的實(shí)用函數(shù)集合，下面是具體的一些用法，需要的朋友可以參考下2022-08-08
本篇文章主要介紹了Vue.js學(xué)習(xí)筆記之修飾符，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07