Vue中的nextTick涉及到Vue中DOM的異步更新，感覺很有意思，特意了解了一下。其中關(guān)于nextTick的源碼涉及到不少知識(shí)，很多不太理解，暫且根據(jù)自己的一些感悟介紹下nextTick。
一、示例
先來一個(gè)示例了解下關(guān)于Vue中的DOM更新以及nextTick的作用。
模板
handlebars
{{msg}}Message got outside $nextTick:{{msg1}}Message got inside $nextTick:{{msg2}}Message got outside $nextTick:{{msg3}}? ? Change the Message
Vue實(shí)例
kotlin
new Vue({el:'.app',data: {msg:'Hello Vue.',msg1:'',msg2:'',msg3:''? },? methods: {? ? changeMsg() {this.msg ="Hello world."this.msg1 =this.$refs.msgDiv.innerHTMLthis.$nextTick(() => {this.msg2 =this.$refs.msgDiv.innerHTML? ? ? })this.msg3 =this.$refs.msgDiv.innerHTML? ? }? }})
patek-shs.fdcpx.net
patek-bjs.fdcpx.net
patek-shenzhen.biaoshouhou.cn
patek-gzs.biaoshouhou.cn
patek-shs.audemarsweixiu.com
patek-bjs.audemarsweixiu.com
patek-shenzhen.hidcwatch.com
patek-gzs.hidcwatch.com
patek-shs.fjfsx.com
patek-bjs.fjfsx.com
patek-shenzhen.hntwx.cn
patek-gzs.hntwx.cn
patek-shs.hx626.com
patek-bjs.hx626.com
patek-shenzhen.watchjwf.cn
patek-gzs.watchjwf.cn
patek-shs.shjshdzb.com
patek-bjs.shjshdzb.com
patek-shenzhen.shmwatch.cn
patek-gzs.shmwatch.cn
patek-shs.gyjshd.com
patek-bjs.gyjshd.com
patek-shenzhen.zhcxb.cn
patek-gzs.zhcxb.cn
patek-shenzhen.jshdvip.com
patek-gzs.jshdvip.com
patek-shs.gyjshdzb.com
patek-bjs.gyjshdzb.com
patek-sys.jhpwd.cn
patek-zzs.jhpwd.cn
patek-shenzhen.wzjshd.com
patek-gzs.wzjshd.com
patek-shs.jsfltime.com
patek-bjs.jsfltime.com
patek-sys.watchwb.cn
patek-css.watchwb.cn
patek-shenzhen.watch-hdl.com
patek-gzs.watch-hdl.com
patek-shs.watchhdlb.cn
patek-bjs.watchhdlb.cn
patek-whs.watchhdli.cn
patek-nbs.watchhdli.cn
patek-shenzhen.watchrhf.cn
patek-gzs.watchrhf.cn
patek-shs.watchec.cn
patek-bjs.watchec.cn
patek-whs.watchda.cn
patek-xms.watchda.cn
patek-hzs.csjshd.com
patek-njs.csjshd.com
點(diǎn)擊前
網(wǎng)絡(luò)異常取消重新上傳
點(diǎn)擊后
網(wǎng)絡(luò)異常取消重新上傳
從圖中可以得知：msg1和msg3顯示的內(nèi)容還是變換之前的，而msg2顯示的內(nèi)容是變換之后的。其根本原因是因?yàn)閂ue中DOM更新是異步的（詳細(xì)解釋在后面）。
二、應(yīng)用場景
下面了解下nextTick的主要應(yīng)用的場景及原因。
在Vue生命周期的created()鉤子函數(shù)進(jìn)行的DOM操作一定要放在Vue.nextTick()的回調(diào)函數(shù)中
在created()鉤子函數(shù)執(zhí)行的時(shí)候DOM 其實(shí)并未進(jìn)行任何渲染，而此時(shí)進(jìn)行DOM操作無異于徒勞，所以此處一定要將DOM操作的js代碼放進(jìn)Vue.nextTick()的回調(diào)函數(shù)中。與之對應(yīng)的就是mounted()鉤子函數(shù)，因?yàn)樵撱^子函數(shù)執(zhí)行時(shí)所有的DOM掛載和渲染都已完成，此時(shí)在該鉤子函數(shù)中進(jìn)行任何DOM操作都不會(huì)有問題 。
在數(shù)據(jù)變化后要執(zhí)行的某個(gè)操作，而這個(gè)操作需要使用隨數(shù)據(jù)改變而改變的DOM結(jié)構(gòu)的時(shí)候，這個(gè)操作都應(yīng)該放進(jìn)Vue.nextTick()的回調(diào)函數(shù)中。
具體原因在Vue的官方文檔中詳細(xì)解釋：
Vue 異步執(zhí)行 DOM 更新。只要觀察到數(shù)據(jù)變化，Vue 將開啟一個(gè)隊(duì)列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)改變。如果同一個(gè) watcher 被多次觸發(fā)，只會(huì)被推入到隊(duì)列中一次。這種在緩沖時(shí)去除重復(fù)數(shù)據(jù)對于避免不必要的計(jì)算和 DOM 操作上非常重要。然后，在下一個(gè)的事件循環(huán)“tick”中，Vue 刷新隊(duì)列并執(zhí)行實(shí)際 (已去重的) 工作。Vue 在內(nèi)部嘗試對異步隊(duì)列使用原生的Promise.then和MessageChannel，如果執(zhí)行環(huán)境不支持，會(huì)采用setTimeout(fn, 0)代替。
例如，當(dāng)你設(shè)置vm.someData = 'new value'，該組件不會(huì)立即重新渲染。當(dāng)刷新隊(duì)列時(shí)，組件會(huì)在事件循環(huán)隊(duì)列清空時(shí)的下一個(gè)“tick”更新。多數(shù)情況我們不需要關(guān)心這個(gè)過程，但是如果你想在 DOM 狀態(tài)更新后做點(diǎn)什么，這就可能會(huì)有些棘手。雖然 Vue.js 通常鼓勵(lì)開發(fā)人員沿著“數(shù)據(jù)驅(qū)動(dòng)”的方式思考，避免直接接觸 DOM，但是有時(shí)我們確實(shí)要這么做。為了在數(shù)據(jù)變化之后等待 Vue 完成更新 DOM ，可以在數(shù)據(jù)變化之后立即使用Vue.nextTick(callback)。這樣回調(diào)函數(shù)在 DOM 更新完成后就會(huì)調(diào)用。
三、nextTick源碼淺析
作用
Vue.nextTick用于延遲執(zhí)行一段代碼，它接受2個(gè)參數(shù)（回調(diào)函數(shù)和執(zhí)行回調(diào)函數(shù)的上下文環(huán)境），如果沒有提供回調(diào)函數(shù)，那么將返回promise對象。
