vue如何解決watch和methods值執(zhí)行順序問(wèn)題
問(wèn)題
- 父組件：
<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時(shí)，先更新該組件綁定的v-model的值觸發(fā)watch，然后再觸發(fā)callback事件綁定的方法getSelectedPeople。
但是實(shí)際執(zhí)行結(jié)果是先執(zhí)行了getSelectedPeople，然后再進(jìn)入了watch。
原因
查詢(xún)資料后得到以下結(jié)論，具體源碼和機(jī)制暫時(shí)不明
（1）頁(yè)面初始化時(shí)： 會(huì)執(zhí)行一次computed，watch初始化時(shí)不會(huì)執(zhí)行，methods只有調(diào)用的時(shí)候才會(huì)執(zhí)行
（2）渲染完成后：
- 如果不是由點(diǎn)擊事件造成的數(shù)據(jù)變化，執(zhí)行順序?yàn)椋簑atch——beforeUpdate——computed——updated
- 如果是由點(diǎn)擊事件造成的數(shù)據(jù)變化，執(zhí)行順序?yàn)椋簃ethods——watch——beforeUpdate——computed——update
繼續(xù)深究：為什么watcher沒(méi)有立即執(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屬性可以配置，其實(shí)還有一個(gè)屬性叫做sync，這個(gè)屬性影響著我們的watcher什么時(shí)候執(zhí)行watcher的回調(diào)。
正常情況下不設(shè)置sync，依賴(lài)數(shù)據(jù)變動(dòng)時(shí)會(huì)觸發(fā)warcher將其推送進(jìn)入隊(duì)列，等到下一個(gè)渲染周期的時(shí)候觸發(fā)。
但是$emit觸發(fā)父組件的自定義事件不會(huì)等到下一個(gè)周期執(zhí)行，而是立即執(zhí)行。
所以代碼的效果就變成了先執(zhí)行callback綁定的父組件getSelectedPeople，再進(jìn)入watch。
解決方法
如果要程序按照我們最初的想法，先觸發(fā)watch，在執(zhí)行methods中的方法，那么只需要在watch中設(shè)置sync屬性為true即可。
watch: {
selectGroupRight: {
handler(val) {},
deep: true,
sync: true,
},
},總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在使用Vue過(guò)渡動(dòng)畫(huà)時(shí),注意選擇器優(yōu)先級(jí),謹(jǐn)慎合并樣式,Vue2中關(guān)于顯示隱藏的類(lèi)名有v-enter、v-leave以及v-enter-active、v-leave-active等,這些可以用來(lái)定義動(dòng)畫(huà)的持續(xù)時(shí)間和樣式,感興趣的朋友跟隨小編一起看看吧2024-09-09
VUE前端導(dǎo)出文件之file-saver插件安裝使用教程
這篇文章主要給大家介紹了關(guān)于VUE前端導(dǎo)出文件之file-saver插件安裝使用的相關(guān)資料,file-saver是一個(gè)用于保存文件的JavaScript庫(kù),它提供了一種簡(jiǎn)單的方式來(lái)生成和保存文件,支持各種文件類(lèi)型,例如文本文件、圖片、PDF等,需要的朋友可以參考下2024-05-05
在vue中使用axios實(shí)現(xiàn)post方式獲取二進(jìn)制流下載文件(實(shí)例代碼)
這篇文章主要介紹了在vue中使用axios實(shí)現(xiàn)post方式獲取二進(jìn)制流下載文件的相關(guān)資料,需要的朋友可以參考下2019-12-12
intellij?idea+vue前端調(diào)試配置圖文教程
在Vue項(xiàng)目開(kāi)發(fā)過(guò)程中,當(dāng)遇到應(yīng)用邏輯出現(xiàn)錯(cuò)誤,但又無(wú)法準(zhǔn)確定位的時(shí)候,知曉Vue項(xiàng)目調(diào)試技巧至關(guān)重要,debug是必備技能,這篇文章主要給大家介紹了關(guān)于intellij?idea+vue前端調(diào)試配置的相關(guān)資料,需要的朋友可以參考下2024-09-09
vue前端通過(guò)騰訊接口獲取用戶(hù)ip的全過(guò)程
今天在寫(xiě)項(xiàng)目掉接口的時(shí)候有一個(gè)接口需要到了用戶(hù)的ip地址,查了半天覺(jué)得這個(gè)方法不錯(cuò),下面這篇文章主要給大家介紹了關(guān)于vue前端通過(guò)騰訊接口獲取用戶(hù)ip的相關(guān)資料,需要的朋友可以參考下2022-12-12
Vue 項(xiàng)目安裝和配置@antfu/eslint-config 保姆級(jí)教程
本文指導(dǎo)如何在Vue項(xiàng)目中安裝配置@antfu/eslint-config,實(shí)現(xiàn)代碼規(guī)范與自動(dòng)格式化,本文分步驟給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2025-09-09
本文主要介紹了elementUI中MENU菜單踩坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
vue中h5端打開(kāi)app(判斷是安卓還是蘋(píng)果)
這篇文章主要介紹了vue中h5端打開(kāi)app(判斷是安卓還是蘋(píng)果),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
這篇文章主要為大家詳細(xì)介紹了vue綜合組件間的通信，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
最近接了一個(gè)移動(dòng)端的項(xiàng)目，實(shí)現(xiàn)微信掃碼功能，今天小編利用這個(gè)平臺(tái)給大家分享vue實(shí)現(xiàn)二維碼掃描功能的實(shí)現(xiàn)代碼，需要的朋友參考下吧2021-08-08