vue watch偵聽器有無immediate的運(yùn)行順序問題
watch偵聽器有無immediate的運(yùn)行順序
剛寫項(xiàng)目的一個(gè)需求中遇到了watch運(yùn)行順序的坑，本打算把項(xiàng)目弄完再來看看，結(jié)果leader說產(chǎn)品還在改需求（高強(qiáng)度學(xué)習(xí)開始！！>_>）
watch普通監(jiān)聽屬性（無immediate）
在初始化時(shí)不會(huì)執(zhí)行watch
created() {
this.id = 1;
console.log(this.id);
console.log(this.name);
},
watch: {
id: function (val) {
if (val == 0) {
this.name = "id等于0";
} else if (val == 1) {
this.name = "id等于1";
}
console.log(this.name, "這里是watch");
},
},
- 結(jié)果：
這里有個(gè)問題是第一次打印name的值為什么是‘初始值’而不是‘id等于1’。
解決這個(gè)疑問就得談到j(luò)s事件處理的執(zhí)行機(jī)制事件循環(huán)。
在created中id=1觸發(fā)watch偵聽器，偵聽器中函數(shù)進(jìn)入事件queue，繼續(xù)執(zhí)行created，打印兩個(gè)log，這里的name為初始值。
created執(zhí)行完后，執(zhí)行事件queue中的watch偵聽器的函數(shù)，給name賦值為‘id等于1’
immediate為true
添加immediate，在初始化時(shí)也會(huì)執(zhí)行watch回調(diào)函數(shù)，組件加載立即執(zhí)行。
要使用immediate需要添加handler屬性
created() {
this.id = 1;
console.log(this.id);
console.log(this.name);
},
watch: {
id: {
handler: function (val) {
if (val == 0) {
this.name = "id等于0";
} else if (val == 1) {
this.name = "id等于1";
}
console.log(this.name, "這里是watch");
},
immediate: true,
},
},
- 結(jié)果：
在組件加載完成時(shí)，立即執(zhí)行watch回調(diào)函數(shù)，即在created前執(zhí)行。
后面的執(zhí)行順序同無immediate時(shí)。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue 動(dòng)態(tài)添加/刪除dom元素節(jié)點(diǎn)的操作代碼
這篇文章主要介紹了vue 動(dòng)態(tài)添加/刪除dom元素,需要在點(diǎn)擊添加時(shí)，增加一行key/value的輸入框；點(diǎn)擊垃圾桶圖標(biāo)時(shí)，刪除對(duì)應(yīng)行，本文結(jié)合實(shí)例代碼給大家講解的非常詳細(xì)，需要的朋友可以參考下2022-12-12
vue2自定義組件通過rollup配置發(fā)布到npm的詳細(xì)步驟
這篇文章主要介紹了vue2自定義組件通過rollup配置發(fā)布到npm,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue 條件渲染v-if和v-show，在模板中，可以根據(jù)條件進(jìn)行渲染。條件用到的是v-if、v-else-if以及v-else來組合實(shí)現(xiàn)的，有時(shí)候我們想要在一個(gè)條件中加載多個(gè)html元素，那么我們可以通過template元素上實(shí)現(xiàn)，下面就來看看具體實(shí)現(xiàn)吧2021-10-10
Vue.js實(shí)現(xiàn)在下拉列表區(qū)域外點(diǎn)擊即可關(guān)閉下拉列表的功能(自定義下拉列表)
這篇文章主要介紹了Vue.js實(shí)現(xiàn)在下拉列表區(qū)域外點(diǎn)擊即可關(guān)閉下拉列表的功能(自定義下拉列表) ,需要的朋友可以參考下2017-05-05
Vue3 el-switch @change事件在初始化時(shí)會(huì)自動(dòng)調(diào)用問題處理的多種方法
本文介紹Vue3中Switch切換確認(rèn)彈窗的兩種實(shí)現(xiàn)方法：方法一通過before-change攔截器精準(zhǔn)控制（推薦）；方法二用初始化狀態(tài)標(biāo)識(shí)兼容舊項(xiàng)目,并提供統(tǒng)一封裝方案,適用于ElementPlus/NaiveUI等組件,感興趣的朋友一起看看吧2025-07-07
Vue echart實(shí)現(xiàn)柱狀圖,電池圖,3D柱圖和3D圓柱圖代碼詳解
這篇文章主要為大家介紹了Vue實(shí)現(xiàn)echart繪圖代碼詳解，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
這篇文章主要介紹了element-ui表格列金額顯示兩位小數(shù)的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
Vue3+TypeScript+Vite服務(wù)端渲染項(xiàng)目的實(shí)現(xiàn)
本文主要介紹了Vue3+TypeScript+Vite服務(wù)端渲染項(xiàng)目的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-09-09
vue 頁(yè)面跳轉(zhuǎn)的實(shí)現(xiàn)方式
這篇文章主要介紹了vue 頁(yè)面跳轉(zhuǎn)的實(shí)現(xiàn)方式，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2021-01-01
這篇文章主要介紹了在vue中完美使用ueditor組件(cdn)解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01