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