對於 Vue.nextTick 方法，自己有些疑惑。在查詢了各種資料后，總結了一下其原理和用途，如有錯誤，請不吝賜教。
概覽
官方文檔說明：
- 用法：
在下次 DOM 更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的 DOM。
疑問：
- DOM 更新循環是指什么？
- 下次更新循環是什么時候？
- 修改數據之后使用，是加快了數據更新進度嗎？
- 在什么情況下要用到？
原理
異步說明
Vue 實現響應式並不是數據發生變化之后 DOM 立即變化，而是按一定的策略進行 DOM 的更新。
在 Vue 的文檔中，說明 Vue 是異步執行 DOM 更新的。關於異步的解析，可以查看阮一峰老師的這篇文章。截取關鍵部分如下：
具體來說，異步執行的運行機制如下。
（1）所有同步任務都在主線程上執行，形成一個執行棧（execution context stack）。
（2）主線程之外，還存在一個"任務隊列"（task queue）。只要異步任務有了運行結果，就在"任務隊列"之中放置一個事件。
（3）一旦"執行棧"中的所有同步任務執行完畢，系統就會讀取"任務隊列"，看看里面有哪些事件。那些對應的異步任務，於是結束等待狀態，進入執行棧，開始執行。
（4）主線程不斷重復上面的第三步。
下圖就是主線程和任務隊列的示意圖。
事件循環說明
簡單來說，Vue 在修改數據后，視圖不會立刻更新，而是等同一事件循環中的所有數據變化完成之后，再統一進行視圖更新。
知乎上的例子：
//改變數據 vm.message = 'changed' //想要立即使用更新后的DOM。這樣不行，因為設置message后DOM還沒有更新 console.log(vm.$el.textContent) // 並不會得到'changed' //這樣可以，nextTick里面的代碼會在DOM更新后執行 Vue.nextTick(function(){ console.log(vm.$el.textContent) //可以得到'changed' })
圖解：
事件循環：
第一個 tick（圖例中第一個步驟，即'本次更新循環'）：
- 首先修改數據，這是同步任務。同一事件循環的所有的同步任務都在主線程上執行，形成一個執行棧，此時還未涉及 DOM 。
- Vue 開啟一個異步隊列，並緩沖在此事件循環中發生的所有數據改變。如果同一個 watcher 被多次觸發，只會被推入到隊列中一次。
第二個 tick（圖例中第二個步驟，即'下次更新循環'）：
同步任務執行完畢，開始執行異步 watcher 隊列的任務，更新 DOM 。Vue 在內部嘗試對異步隊列使用原生的 Promise.then 和 MessageChannel 方法，如果執行環境不支持，會采用 setTimeout(fn, 0) 代替。
第三個 tick（圖例中第三個步驟）：
此時就是文檔所說的
下次 DOM 更新循環結束之后
此時通過 Vue.nextTick 獲取到改變后的 DOM 。通過 setTimeout(fn, 0) 也可以同樣獲取到。
簡單總結事件循環：
同步代碼執行 -> 查找異步隊列，推入執行棧，執行Vue.nextTick[事件循環1] ->查找異步隊列，推入執行棧，執行Vue.nextTick[事件循環2]...
總之，異步是單獨的一個tick，不會和同步在一個 tick 里發生，也是 DOM 不會馬上改變的原因。
對於事件循環，可以在這里查看更詳細的內容： https://segmentfault.com/a/11...
用途
應用場景：需要在視圖更新之后，基於新的視圖進行操作。
created、mounted
需要注意的是，在 created 和 mounted 階段，如果需要操作渲染后的試圖，也要使用 nextTick 方法。
官方文檔說明：
注意 mounted 不會承諾所有的子組件也都一起被掛載。如果你希望等到整個視圖都渲染完畢，可以用 vm.$nextTick 替換掉 mounted
mounted: function () { this.$nextTick(function () { // Code that will run only after the // entire view has been rendered }) }
其他應用場景
其他應用場景如下三例：
例子1：
點擊按鈕顯示原本以 v-show = false 隱藏起來的輸入框，並獲取焦點。
showsou(){ this.showit = true //修改 v-show document.getElementById("keywords").focus() //在第一個 tick 里，獲取不到輸入框，自然也獲取不到焦點 }
修改為：
showsou(){ this.showit = true this.$nextTick(function () { // DOM 更新了 document.getElementById("keywords").focus() }) }
例子2：
點擊獲取元素寬度。
<div id="app">
<p ref="myWidth" v-if="showMe">{{ message }}</p>
<button @click="getMyWidth">獲取p元素寬度</button>
</div>
getMyWidth() {
this.showMe = true;
//this.message = this.$refs.myWidth.offsetWidth;
//報錯 TypeError: this.$refs.myWidth is undefined
this.$nextTick(()=>{
//dom元素更新后執行，此時能拿到p元素的屬性
this.message = this.$refs.myWidth.offsetWidth;
})
}
例子3：
使用 swiper 插件通過 ajax 請求圖片后的滑動問題。
實例理解 nextTick 應用
下面的例子來自 https://www.cnblogs.com/hity-...， 稍有改動。各位可以復制運行一遍，加深理解。
<template> <div> <ul> <li class="example" v-for="item in list1">{{item}}</li> </ul> <ul> <li class="example" v-for="item in list2">{{item}}</li> </ul> <ol> <li class="example" v-for="item in list3">{{item}}</li> </ol> <ol> <li class="example" v-for="item in list4">{{item}}</li> </ol> <ol> <li class="example" v-for="item in list5">{{item}}</li> </ol> </div> </template> <script type="text/javascript"> export default { data() { return { list1: [], list2: [], list3: [], list4: [], list5: [] } }, created() { this.composeList12() this.composeList34() this.composeList5() this.$nextTick(function() { // DOM 更新了 console.log('finished test ' + new Date().toString(),document.querySelectorAll('.example').length) }) }, methods: { composeList12() { let me = this let count = 10000 for (let i = 0; i < count; i++) { this.$set(me.list1, i, 'I am a 測試信息～～啦啦啦' + i) } console.log('finished list1 ' + new Date().toString(),document.querySelectorAll('.example').length) for (let i = 0; i < count; i++) { this.$set(me.list2, i, 'I am a 測試信息～～啦啦啦' + i) } console.log('finished list2 ' + new Date().toString(),document.querySelectorAll('.example').length) this.$nextTick(function() { // DOM 更新了 console.log('finished tick1&2 ' + new Date().toString(),document.querySelectorAll('.example').length) }) }, composeList34() { let me = this let count = 10000 for (let i = 0; i < count; i++) { this.$set(me.list3, i, 'I am a 測試信息～～啦啦啦' + i) } console.log('finished list3 ' + new Date().toString(),document.querySelectorAll('.example').length) this.$nextTick(function() { // DOM 更新了 console.log('finished tick3 ' + new Date().toString(),document.querySelectorAll('.example').length) }) setTimeout(me.setTimeout1, 0) }, setTimeout1() { let me = this let count = 10000 for (let i = 0; i < count; i++) { this.$set(me.list4, i, 'I am a 測試信息～～啦啦啦' + i) } console.log('finished list4 ' + new Date().toString(),document.querySelectorAll('.example').length) me.$nextTick(function() { // DOM 更新了 console.log('finished tick4 ' + new Date().toString(),document.querySelectorAll('.example').length) }) }, composeList5() { let me = this let count = 10000 this.$nextTick(function() { // DOM 更新了 console.log('finished tick5-1 ' + new Date().toString(),document.querySelectorAll('.example').length) }) setTimeout(me.setTimeout2, 0) }, setTimeout2() { let me = this let count = 10000 for (let i = 0; i < count; i++) { this.$set(me.list5, i, 'I am a 測試信息～～啦啦啦' + i) } console.log('finished list5 ' + new Date().toString(),document.querySelectorAll('.example').length) me.$nextTick(function() { // DOM 更新了 console.log('finished tick5 ' + new Date().toString(),document.querySelectorAll('.example').length) }) } } } </script>
結果：
什么是Vue.nextTick()？？
定義：在下次 DOM 更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的 DOM。
所以就衍生出了這個獲取更新后的DOM的Vue方法。所以放在Vue.nextTick()回調函數中的執行的應該是會對DOM進行操作的 js代碼；
理解：nextTick()，是將回調函數延遲在下一次dom更新數據后調用，簡單的理解是：當數據更新了，在dom中渲染后，自動執行該函數，
<template> <div class="hello"> <div> <button id="firstBtn" @click="testClick()" ref="aa">{{testMsg}}</button> </div> </div> </template> <script> export default { name: 'HelloWorld', data () { return { testMsg:"原始值", } }, methods:{ testClick:function(){ let that=this; that.testMsg="修改后的值"; console.log(that.$refs.aa.innerText); //that.$refs.aa獲取指定DOM，輸出：原始值 } } } </script>
使用this.$nextTick()
methods:{ testClick:function(){ let that=this; that.testMsg="修改后的值"; that.$nextTick(function(){ console.log(that.$refs.aa.innerText); //輸出：修改后的值 }); } }
注意：Vue 實現響應式並不是數據發生變化之后 DOM 立即變化，而是按一定的策略進行 DOM 的更新。$nextTick 是在下次 DOM 更新循環結束之后執行延遲回調，在修改數據之后使用 $nextTick，則可以在回調中獲取更新后的 DOM，
什么時候需要用的Vue.nextTick()？？
1、Vue生命周期的created()鈎子函數進行的DOM操作一定要放在Vue.nextTick()的回調函數中，原因是在created()鈎子函數執行的時候DOM 其實並未進行任何渲染，而此時進行DOM操作無異於徒勞，所以此處一定要將DOM操作的js代碼放進Vue.nextTick()的回調函數中。與之對應的就是mounted鈎子函數，因為該鈎子函數執行時所有的DOM掛載已完成。
created(){ let that=this; that.$nextTick(function(){ //不使用this.$nextTick()方法會報錯 that.$refs.aa.innerHTML="created中更改了按鈕內容"; //寫入到DOM元素 }); },
2、當項目中你想在改變DOM元素的數據后基於新的dom做點什么，對新DOM一系列的js操作都需要放進Vue.nextTick()的回調函數中；通俗的理解是：更改數據后當你想立即使用js操作新的視圖的時候需要使用它
<template> <div class="hello"> <h3 id="h">{{testMsg}}</h3> </div> </template> <script> export default { name: 'HelloWorld', data () { return { testMsg:"原始值", } }, methods:{ changeTxt:function(){ let that=this; that.testMsg="修改后的文本值"; //vue數據改變，改變dom結構 let domTxt=document.getElementById('h').innerText; //后續js對dom的操作 console.log(domTxt); //輸出可以看到vue數據修改后DOM並沒有立即更新，后續的dom都不是最新的 if(domTxt==="原始值"){ console.log("文本data被修改后dom內容沒立即更新"); }else { console.log("文本data被修改后dom內容被馬上更新了"); } }, } } </script>
正確的用法是：vue改變dom元素結構后使用vue.$nextTick()方法來實現dom數據更新后延遲執行后續代碼
changeTxt:function(){ let that=this; that.testMsg="修改后的文本值"; //修改dom結構 that.$nextTick(function(){ //使用vue.$nextTick()方法可以dom數據更新后延遲執行 let domTxt=document.getElementById('h').innerText; console.log(domTxt); //輸出可以看到vue數據修改后並沒有DOM沒有立即更新， if(domTxt==="原始值"){ console.log("文本data被修改后dom內容沒立即更新"); }else { console.log("文本data被修改后dom內容被馬上更新了"); } }); },
3、在使用某個第三方插件時 ，希望在vue生成的某些dom動態發生變化時重新應用該插件，也會用到該方法，這時候就需要在 $nextTick 的回調函數中執行重新應用插件的方法。
Vue.nextTick(callback) 使用原理：
原因是，Vue是異步執行dom更新的，一旦觀察到數據變化，Vue就會開啟一個隊列，然后把在同一個事件循環 (event loop) 當中觀察到數據變化的 watcher 推送進這個隊列。如果這個watcher被觸發多次，只會被推送到隊列一次。這種緩沖行為可以有效的去掉重復數據造成的不必要的計算和DOm操作。而在下一個事件循環時，Vue會清空隊列，並進行必要的DOM更新。
當你設置 vm.someData = 'new value'，DOM 並不會馬上更新，而是在異步隊列被清除，也就是下一個事件循環開始時執行更新時才會進行必要的DOM更新。如果此時你想要根據更新的 DOM 狀態去做某些事情，就會出現問題。。為了在數據變化之后等待 Vue 完成更新 DOM ，可以在數據變化之后立即使用 Vue.nextTick(callback) 。這樣回調函數在 DOM 更新完成后就會調用。