vue項(xiàng)目watch內(nèi)的函數(shù)重復(fù)觸發(fā)問題的解決
有兩個(gè)頁(yè)面A和B,每個(gè)頁(yè)面里都有一個(gè)getList()方法。這個(gè)兩個(gè)方法都需要傳一個(gè)相同的參數(shù)C,參數(shù)C的選擇過程又比較麻煩。為了避免在切換A、B兩個(gè)界面重復(fù)選擇參數(shù)C的問題,我將參數(shù)C存入vuex中,然后在兩個(gè)頁(yè)面里都使用watch監(jiān)聽參數(shù)C來執(zhí)行g(shù)etList()方法。然后發(fā)現(xiàn)一個(gè)問題,從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()方法。
后來發(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è)問題,最后找到以下兩種解決方案:
解決方法1通過router路徑來判斷是否執(zhí)行g(shù)etList()
watch: {someValue(newValue, oldValue) { if (this.$route.fullPath === ’A頁(yè)面路由路徑’) {// do something }} }解決方法2
添加一個(gè)flag參數(shù)來判斷頁(yè)面是否是active狀態(tài),使用keep-alive緩存的組件只會(huì)觸發(fā)activated和deactivated事件,所以就在這兩個(gè)事件觸發(fā)時(shí)把flag置為true和false,只有在flag為true的時(shí)候才執(zhí)行g(shù)etList()
{ data () { return { activatedFlag: false }; }, watch: { ’someValue’(val) { if(val && this.activatedFlag) {this.getlist(); } } }, activated () { this.activatedFlag = true; }, deactivated () { this.activatedFlag = false; }}
如果頁(yè)面比較多,而且各頁(yè)面里的函數(shù)名稱不一致的話,可以把上面代碼的watch部分去掉寫成一個(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ā)問題的兩種解決方案的詳細(xì)內(nèi)容,更多關(guān)于vue watch函數(shù)重復(fù)觸發(fā)解決的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章!
相關(guān)文章:
1. ASP動(dòng)態(tài)網(wǎng)頁(yè)制作技術(shù)經(jīng)驗(yàn)分享2. .Net加密神器Eazfuscator.NET?2023.2?最新版使用教程3. jsp文件下載功能實(shí)現(xiàn)代碼4. Xml簡(jiǎn)介_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理5. .Net Core和RabbitMQ限制循環(huán)消費(fèi)的方法6. 詳解瀏覽器的緩存機(jī)制7. 如何在jsp界面中插入圖片8. JSP之表單提交get和post的區(qū)別詳解及實(shí)例9. jsp實(shí)現(xiàn)登錄驗(yàn)證的過濾器10. phpstudy apache開啟ssi使用詳解
