一麦轰、原理
1.異步說明
Vue 實(shí)現(xiàn)響應(yīng)式并不是數(shù)據(jù)發(fā)生變化之后 DOM 立即變化怜庸，而是按一定的策略進(jìn)行 DOM 的更新。
2.事件循環(huán)說明
簡(jiǎn)單來說米绕，Vue在修改數(shù)據(jù)后瑟捣，視圖不會(huì)立刻更新，而是等同一事件循環(huán)中的所有數(shù)據(jù)變化完成之后栅干，再統(tǒng)一進(jìn)行視圖更新迈套。
eg:
圖解：
事件循環(huán)：
第一個(gè)tick（本次更新循環(huán)）
1.首先修改數(shù)據(jù)，這是同步任務(wù)碱鳞。同一事件循環(huán)的所有的同步任務(wù)都在主線程上執(zhí)行桑李，形成一個(gè)執(zhí)行棧，此時(shí)還未涉及DOM.
2.Vue開啟一個(gè)異步隊(duì)列窿给，并緩沖在此事件循環(huán)中發(fā)生的所有數(shù)據(jù)變化贵白。如果同一個(gè)watcher被多次觸發(fā)，只會(huì)被推入隊(duì)列中一次崩泡。
第二個(gè)tick(‘下次更新循環(huán)’)
同步任務(wù)執(zhí)行完畢禁荒，開始執(zhí)行異步watcher隊(duì)列的任務(wù)，更新DOM角撞。Vue在內(nèi)部嘗試對(duì)異步隊(duì)列使用原生的Promise.then和MessageChannel 方法呛伴，如果執(zhí)行環(huán)境不支持，會(huì)采用 setTimeout(fn, 0) 代替谒所。
第三個(gè)tick（下次 DOM 更新循環(huán)結(jié)束之后）
二热康、應(yīng)用場(chǎng)景及原因
1.在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ù)中。與之對(duì)應(yīng)的就是mounted()鉤子函數(shù)，因?yàn)樵撱^子函數(shù)執(zhí)行時(shí)所有的DOM掛載和渲染都已完成奕锌，此時(shí)在該鉤子函數(shù)中進(jìn)行任何DOM操作都不會(huì)有問題衫贬。
2.在數(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ù)對(duì)于避免不必要的計(jì)算和 DOM 操作上非常重要忽肛。然后村砂，在下一個(gè)的事件循環(huán)“tick”中，Vue 刷新隊(duì)列并執(zhí)行實(shí)際 (已去重的) 工作屹逛。Vue 在內(nèi)部嘗試對(duì)異步隊(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)用。
