Vue.nextTick()是比較常用到的API
Vue官網對它的解釋是：在下次 DOM 更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的 DOM。
首先要明白Vue的響應式原理（官網有詳細的解釋）：在data選項里所有屬性都會被watch監控，當修改了data的某一個值，並不會立即反應到視圖中。vue將你對data的更改放到watcher的一個對列中（異步），只有在當前任務空閑時才會去執行watcher隊列任務。這就有一個延遲時間了（我們看起來是直接反映到視圖的，其實並不是！！，只是瀏覽器引擎在很短的時間內就比較完了數據的前后差異並更新到視圖里）。官網有個很清晰的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<example></example>
</div>
</body>
<script>
Vue.component('example', {
template: '<span>{{ message }}</span>',
data: function () {
return {
message: '沒有更新'
}
},
mounted () {
this.updateMessage();
},
methods: {
updateMessage: function () {
this.message = '更新完成'
console.log(this.$el.textContent) // => '沒有更新'
this.$nextTick(function () {
console.log(this.$el.textContent) // => '更新完成'
})
}
}
})
new Vue({
el:'#app'
})
</script>
</html>
在視圖上最終顯示 更新完成，但在控制台console.log就不一樣了
在updateMessage函數里改變了msg的值（異步），下一步打印 msg （同步） 可以看出 打印的是‘沒有更新’ 【注意：改變data的某個值，再立即引用，是經常犯的一個錯誤】，為了規避這個錯誤，就有了nextTick( ) ,現在再結合官網的那兩句話，是不是清晰很多呢？ 視圖更新完了就調用nextTick(),此時數據也就更新完了而且插到視圖。
那什么場景需要使用到nextTick( ) 呢？
待續。。。。。。。
2017-06-28 00：31