vue watch偵聽器有無immediate的運行順序問題
更新時間：2024年08月07日 10:05:57 作者：敲完這個我就再也不熬夜了
這篇文章主要介紹了vue watch偵聽器有無immediate的運行順序問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
watch偵聽器有無immediate的運行順序
剛寫項目的一個需求中遇到了watch運行順序的坑，本打算把項目弄完再來看看，結(jié)果leader說產(chǎn)品還在改需求（高強度學(xué)習(xí)開始?。?gt;_>）
watch普通監(jiān)聽屬性（無immediate）
在初始化時不會執(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é)果：
這里有個問題是第一次打印name的值為什么是‘初始值’而不是‘id等于1’。
解決這個疑問就得談到j(luò)s事件處理的執(zhí)行機制事件循環(huán)。
在created中id=1觸發(fā)watch偵聽器，偵聽器中函數(shù)進(jìn)入事件queue，繼續(xù)執(zhí)行created，打印兩個log，這里的name為初始值。
created執(zhí)行完后，執(zhí)行事件queue中的watch偵聽器的函數(shù)，給name賦值為‘id等于1’
immediate為true
添加immediate，在初始化時也會執(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é)果：
在組件加載完成時，立即執(zhí)行watch回調(diào)函數(shù)，即在created前執(zhí)行。
后面的執(zhí)行順序同無immediate時。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue--vuex的詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue中cookies的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
在vue.js項目中使用vue-router，可以使用路由進(jìn)行界面或路徑跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于Vue3使用路由VueRouter4的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-07-07
這篇文章主要介紹了Vue中錯誤圖片的處理的實現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了Vue通過路由實現(xiàn)頁面間參數(shù)的傳遞,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
Vue.js（讀音 /vjuː/, 類似于 view） 是一套構(gòu)建用戶界面的 漸進(jìn)式框架。本文給大家介紹Vue.js開發(fā)環(huán)境搭建的詳解講解，感興趣的朋友一起看看吧2016-11-11
Vite打包項目時,需要去除開發(fā)時加入的console、debugger調(diào)試信息,本文主要介紹了Vite打包時去除console的方法實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2024-08-08
這篇文章主要介紹了vue根據(jù)條件不同顯示不同按鈕的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue+Vant實現(xiàn)7天日歷展示并在切換日期時實時變換功能
本文介紹了如何利用Vue和Vant框架結(jié)合moment.js插件來實現(xiàn)一個7天日歷展示功能,在這個功能中,用戶可以在切換日期時看到界面的實時變化,此外,文章還提供了代碼實現(xiàn)和效果測試的詳細(xì)步驟,幫助開發(fā)者能夠順利完成類似的項目開發(fā)2024-10-10
下面小編就為大家分享一篇vue中實現(xiàn)移動端的scroll滾動方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03