vue如何解決watch和methods值執(zhí)行順序問題
問題
- 父組件:
<GroupTransform :is-show.sync="selectPeopleDialogVisible" @callback="getSelectedPeople" ></GroupTransform>
watch: { selectGroupRight: { handler(val) { }, deep: true, }, }, methods:{ getSelectedPeople(){}, }
- 子組件:
confirm() { this.$emit('input', this.rightGroups); this.$emit('callback'); },
目的是當(dāng)我們觸發(fā)子組件的confirm時,先更新該組件綁定的v-model的值觸發(fā)watch,然后再觸發(fā)callback事件綁定的方法getSelectedPeople。
但是實際執(zhí)行結(jié)果是先執(zhí)行了getSelectedPeople,然后再進入了watch。
原因
查詢資料后得到以下結(jié)論,具體源碼和機制暫時不明
(1)頁面初始化時: 會執(zhí)行一次computed,watch初始化時不會執(zhí)行,methods只有調(diào)用的時候才會執(zhí)行
(2)渲染完成后:
- 如果不是由點擊事件造成的數(shù)據(jù)變化,執(zhí)行順序為:watch——beforeUpdate——computed——updated
- 如果是由點擊事件造成的數(shù)據(jù)變化,執(zhí)行順序為:methods——watch——beforeUpdate——computed——update
繼續(xù)深究:為什么watcher沒有立即執(zhí)行?
在vue的watcher.js文件源碼中,我找到了這么一段
// options if (options) { this.deep = !!options.deep this.user = !!options.user this.lazy = !!options.lazy this.sync = !!options.sync } else { this.deep = this.user = this.lazy = this.sync = false } ...... /** * Subscriber interface. * Will be called when a dependency changes. */ update () { /* istanbul ignore else */ if (this.lazy) { this.dirty = true } else if (this.sync) { this.run() } else { queueWatcher(this) } }
可以看到vue的watcher除了我們常用的deep屬性可以配置,其實還有一個屬性叫做sync,這個屬性影響著我們的watcher什么時候執(zhí)行watcher的回調(diào)。
正常情況下不設(shè)置sync,依賴數(shù)據(jù)變動時會觸發(fā)warcher將其推送進入隊列,等到下一個渲染周期的時候觸發(fā)。
但是$emit觸發(fā)父組件的自定義事件不會等到下一個周期執(zhí)行,而是立即執(zhí)行。
所以代碼的效果就變成了先執(zhí)行callback綁定的父組件getSelectedPeople,再進入watch。
解決方法
如果要程序按照我們最初的想法,先觸發(fā)watch,在執(zhí)行methods中的方法,那么只需要在watch中設(shè)置sync屬性為true即可。
watch: { selectGroupRight: { handler(val) {}, deep: true, sync: true, }, },
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于對keep-alive的理解,使用場景以及存在的問題解讀
這篇文章主要介紹了關(guān)于對keep-alive的理解,使用場景以及存在的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05vue動畫—通過鉤子函數(shù)實現(xiàn)半場動畫操作
這篇文章主要介紹了vue動畫—通過鉤子函數(shù)實現(xiàn)半場動畫操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08微信小程序Webview與H5通信的思路與實戰(zhàn)記錄
這篇文章主要介紹了微信小程序Webview與H5通信的思路與實戰(zhàn)的相關(guān)資料,由于微信小程序與H5之間的通信限制,無法滿足業(yè)務(wù)需求,通過動態(tài)改變url的hash值來傳遞參數(shù),并利用vue-router組件的路由守衛(wèi)來避免頁面刷新,需要的朋友可以參考下2025-01-01