$nextTick 是 Vue.js 提供的一個(gè)方法，用于在 DOM 更新完成后執(zhí)行回調(diào)函數(shù)。它是基于 JavaScript 的事件循環(huán)機(jī)制實(shí)現(xiàn)的。原理和作用如下：

原理：
Vue 在更新 DOM 時(shí)是異步執(zhí)行的。只要偵聽到數(shù)據(jù)變化，Vue 將開啟一個(gè)任務(wù)隊(duì)列，并緩沖在同一時(shí)間循環(huán)中發(fā)生的所有數(shù)據(jù)變更。如果同一個(gè) watcher 被多次觸發(fā)，只會(huì)被推入到隊(duì)列中一次。（這種在緩沖時(shí)去除重復(fù)數(shù)據(jù)對(duì)于避免不必要的計(jì)算和 DOM 操作是非常重要的）
然后，在下一個(gè)的事件循環(huán)“tick”中，Vue 刷新隊(duì)列并執(zhí)行任務(wù)隊(duì)列 (已去重的) 工作。
Vue 在內(nèi)部對(duì)異步隊(duì)列嘗試使用原生的 Promise.then（微任務(wù)）、MutationObserver 和 setImmediate，如果執(zhí)行環(huán)境不支持，則會(huì)采用 setTimeout(fn, 0)（宏任務(wù)）代替。

什么時(shí)候使用$nextTick
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ù)中。

2、當(dāng)項(xiàng)?中改變data函數(shù)的數(shù)據(jù)，想基于新的dom做點(diǎn)什么，對(duì)新DOM?系列的js操作都需要放進(jìn)Vue.nextTick()的回調(diào)函數(shù)中
作用：

1. 等待 DOM 更新后執(zhí)行操作：有時(shí)候你需要在 Vue 更新 DOM 后執(zhí)行一些操作，例如操作更新后的 DOM 元素。使用 $nextTick 可以確保你的操作在 DOM 更新完成后執(zhí)行。

2. 避免不同數(shù)據(jù)更新之間的競(jìng)態(tài)條件：如果你在數(shù)據(jù)更新后立即想要獲取更新后的 DOM 信息或進(jìn)行操作，直接在數(shù)據(jù)更新后使用 $nextTick 會(huì)更可靠，避免競(jìng)態(tài)條件。

示例代碼：

// 在 Vue 實(shí)例內(nèi)部
this.$nextTick(function() {
  // DOM 已更新
  // 執(zhí)行操作
});

// 在組件內(nèi)部
this.$nextTick(function() {
  // DOM 已更新
  // 執(zhí)行操作
});

JS 運(yùn)行機(jī)制
JS 執(zhí)行是單線程的，它是基于事件循環(huán)的。事件循環(huán)大致分為以下幾個(gè)步驟：

1. 所有同步任務(wù)都在主線程上執(zhí)行，形成一個(gè)執(zhí)行棧
2. 主線程之外，還存在一個(gè)"任務(wù)隊(duì)列"（task queue）。只要異步任務(wù)有了運(yùn)行結(jié)果，就在"任務(wù)隊(duì)列"之中放置一個(gè)事件。
3. 一旦"執(zhí)行棧"中的所有同步任務(wù)執(zhí)行完畢，系統(tǒng)就會(huì)讀取"任務(wù)隊(duì)列"，看看里面有哪些事件。那些對(duì)應(yīng)的異步任務(wù)，于是結(jié)束等待狀態(tài)，進(jìn)入執(zhí)行棧，開始執(zhí)行。
4. 主線程不斷重復(fù)上面的第三步。

主線程的執(zhí)行過程就是一個(gè) tick，而所有的異步結(jié)果都是通過 “任務(wù)隊(duì)列” 來調(diào)度。"任務(wù)隊(duì)列"中存放的是一個(gè)個(gè)的任務(wù)（task）。規(guī)范中規(guī)定 task 分為兩大類，宏任務(wù)和微任務(wù)
微任務(wù)，也稱job
通常用于在當(dāng)前正在執(zhí)行的腳本之后直接發(fā)生的事情，比如對(duì)一系列的行為做出反應(yīng)，或者做出一些異步的任務(wù)，而不需要新建一個(gè)全新的task。只要執(zhí)行棧沒有其他javascript在執(zhí)行，在每個(gè)task結(jié)束時(shí)，微任務(wù)隊(duì)列就會(huì)在回調(diào)后處理。在微任務(wù)期間排隊(duì)的其他微任務(wù)將被添加到這個(gè)隊(duì)列的末尾
常見的 微任務(wù) 有 MutationObsever 、 Promise.then 、$nextTick

宏任務(wù)
作用是為了讓瀏覽器能夠從內(nèi)部獲取javascript / dom的內(nèi)容并確保執(zhí)行棧能夠順序進(jìn)行。調(diào)度是隨處可見的，例如解析HTML，獲得鼠標(biāo)點(diǎn)擊的事件回調(diào)等等。
常見的 宏任務(wù) 有 setTimeout、MessageChannel、postMessage、setImmediate；

vue進(jìn)行DOM更新內(nèi)部也是調(diào)用nextTick來做異步隊(duì)列控制。而當(dāng)我們自己調(diào)用nextTick的時(shí)候，它就在更新DOM的那個(gè)micro task后追加了我們自己的回調(diào)函數(shù)，從而確保我們的代碼在DOM更新后執(zhí)行。

setTimeout是宏任務(wù)：只是延遲執(zhí)行，在延遲執(zhí)行的方法里，DOM有可能會(huì)更新也有可能沒有更新。