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í)開始?。?gt;_>）
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--vuex的詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue中cookies的使用方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
在vue.js項(xiàng)目中使用vue-router，可以使用路由進(jìn)行界面或路徑跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于Vue3使用路由VueRouter4的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-07-07
Vue中錯(cuò)誤圖片的處理的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue中錯(cuò)誤圖片的處理的實(shí)現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
Vue通過路由實(shí)現(xiàn)頁面間參數(shù)的傳遞
這篇文章主要介紹了Vue通過路由實(shí)現(xiàn)頁面間參數(shù)的傳遞,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
Vue.js（讀音 /vjuː/, 類似于 view） 是一套構(gòu)建用戶界面的 漸進(jìn)式框架。本文給大家介紹Vue.js開發(fā)環(huán)境搭建的詳解講解，感興趣的朋友一起看看吧2016-11-11
Vite打包時(shí)去除console的方法實(shí)現(xiàn)
Vite打包項(xiàng)目時(shí),需要去除開發(fā)時(shí)加入的console、debugger調(diào)試信息,本文主要介紹了Vite打包時(shí)去除console的方法實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2024-08-08
這篇文章主要介紹了vue根據(jù)條件不同顯示不同按鈕的操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue+Vant實(shí)現(xiàn)7天日歷展示并在切換日期時(shí)實(shí)時(shí)變換功能
本文介紹了如何利用Vue和Vant框架結(jié)合moment.js插件來實(shí)現(xiàn)一個(gè)7天日歷展示功能,在這個(gè)功能中,用戶可以在切換日期時(shí)看到界面的實(shí)時(shí)變化,此外,文章還提供了代碼實(shí)現(xiàn)和效果測試的詳細(xì)步驟,幫助開發(fā)者能夠順利完成類似的項(xiàng)目開發(fā)2024-10-10
vue中實(shí)現(xiàn)移動(dòng)端的scroll滾動(dòng)方法
下面小編就為大家分享一篇vue中實(shí)現(xiàn)移動(dòng)端的scroll滾動(dòng)方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03