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中錯(cuò)誤圖片的處理的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue中錯(cuò)誤圖片的處理的實(shí)現(xiàn)代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11Vue通過路由實(shí)現(xiàn)頁面間參數(shù)的傳遞
這篇文章主要介紹了Vue通過路由實(shí)現(xiàn)頁面間參數(shù)的傳遞,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04Vite打包時(shí)去除console的方法實(shí)現(xiàn)
Vite打包項(xiàng)目時(shí),需要去除開發(fā)時(shí)加入的console、debugger調(diào)試信息,本文主要介紹了Vite打包時(shí)去除console的方法實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2024-08-08Vue+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-10vue中實(shí)現(xiàn)移動(dòng)端的scroll滾動(dòng)方法
下面小編就為大家分享一篇vue中實(shí)現(xiàn)移動(dòng)端的scroll滾動(dòng)方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03