Vue 雖然采用了“數據驅動”的思想，但我們依然需要在某些情況下進行少量的 DOM 操作。在 Vue 中，異步執行 DOM 更新。多數情況下，我們並不需要考慮這個過程，但是如果我們的某個操作中，DOM1 的數據變化后，DOM2 需要從 DOM1 的 DOM 結構中獲取數據，就會發現數據並沒有實時更新，這時候就需要用到 nextTick
我們都知道大多數情況下 Vue 數據變化后，相應的 html 也隨着發生變化。事實上，當數據發生改變后，對應的 html 並沒有立即重新渲染，
而是開啟一個隊列，並將改變的數據緩存在同一事件循環中，當刷新隊列時，組件會在事件循環隊列清空時的下一個“tick”更新。
如果同一個 watcher 被多次觸發，只會被推入到隊列中一次。這種在緩沖時去除重復數據對於避免不必要的計算和 DOM 操作上非常重要。
Vue.nextTick(callback) 。這樣回調函數在 DOM 更新完成后就會調用。
頁面顯示如下：
但是如果我們把 mounted 鈎子改為 created 鈎子：
我們發現 DOM 操作失敗，頁面內容並未更改，在控制台上報錯：未找到相應的DOM節點：
現在我們給 created 鈎子稍作修改，加上 this.$nextTick, 在它的回調函數中寫我們的 DOM 操作：
加上 nextTick 后，又可以正常顯示：
【分析】：
在created()鈎子函數執行的時候DOM 其實並未進行任何渲染，而此時進行DOM操作無異於徒勞，所以此處一定要將DOM操作的js代碼放進Vue.nextTick()的回調函數中。與之對應的就是mounted()鈎子函數，因為該鈎子函數執行時所有的DOM掛載和渲染都已完成，此時在該鈎子函數中進行任何DOM操作都不會有問題 。
再來另外一個場景：
我們現在給按鈕添加點擊事件，事件觸發后，相應 DOM 的數據發生更改，並查看此刻該 DOM 節點數據的變化情況：
當我們第一次點擊綁定事件的 DOM 后，該按鈕的 innerHTML 的文字發生改變，更改為： NEW MESSAGE，但是此時打印該 DOM 所綁定的卻是點擊之前的舊的數據；
當我們再次點擊該元素時，控制台打印的該元素綁定的數據才是新的更改的數據
總結：
1. 在Vue生命周期的created()鈎子函數進行的DOM操作一定要放在Vue.nextTick()的回調函數中
2. 在數據變化后要執行的某個操作，而這個操作需要使用隨數據改變而改變的DOM結構的時候，這個操作都應該放進Vue.nextTick()的回調函數中。