在Vue中，有一個很重要的機制：nextTick。這個機制允許我們在Dom更新后執行代碼，這對于一些特定的操作非常有用，比如更新數據后，獲取元素的位置信息或者查看渲染后的Dom，而且不需要使用setTimeout等js延遲函數。
所以，什么是nextTick呢？nextTick是Vue.js的一個異步操作函數。Vue.js 為了保證高效，渲染Dom一般采用異步批處理的方式，即在下一輪事件循環時執行任務。
// 主要是異步讀取Dom
Vue.nextTick(function () {
// Code
})nextTick接受一個callback，該callback會在DOM更新完成后被調用，且只被調用一次。 例如，如果你想獲取一個新添加元素的位置信息，就可以使用nextTick 的回調。
new Vue({
el: 'body',
data: {
items: []
},
methods: {
addItem: function () {
this.items.push({text: 'new item'})
this.$nextTick(function () {
// DOM現在更新了
// `this.$el` 現在更新了
console.log('add', this.$el.querySelectorAll('li').length) // 1
})
}
})在這個例子中，添加一個元素到items數組中，然后使用 nextTick 在DOM更新后查詢
這個機制在使用計算屬性或者偵聽器時尤其有用。計算屬性的值由其他的 變量計算而得，所以每當之前的變量發生變化，計算屬性就會重新計算。如 果它依賴的變量發生變化的時候，我們修改計算屬性返回的值是沒有意義的， 因為這個值會被DOM渲染覆蓋。所以我們需要在nextTick回調里執行某些操作， 例如調用某個函數或者改變某個值，來確保更新渲染的結果。
// HTML代碼Confirmed!
// JS代碼
data: {
message: 'Hello Vue.js!',
confirmed: false
},
methods: {
checker: function () {
this.confirmed = true
this.$nextTick(function () {
// DOM現在更新了
console.log(this.$el.textContent) // "Confirmed!"
this.checkShow() // 啥也沒干，當然返回 nothing 哈哈哈
})
},
checkShow: function () {
console.log('確認框已顯示')
}
}在這個例子中，我們點擊Check按鈕會將 confirmed 置為 true，此時DOM還沒 有渲染，我們需要調用 nextTick(callback) 觸發DOM更新，然后我們返 回的是 this.checkShow()，等待DOM更新。
總之，Vuejs的nextTick是一個非常有用的機制。它使得我們能夠在Vue.js 的數據更新后使用Dom。同時也讓我們避免使用setTimeout和傳統的監聽Dom更新的方式。