Vue.nextTick() 和Vue.nextTick() 使用案例

在下次DOM 更新循環結束以後執行延遲迴調。在修改數據以後當即使用這個方法，獲取更新後的 DOM。

雖然 vue.js 一般鼓勵開發人員用 數據驅動 的方式思考， 避免直接接觸 DOM ,但有時咱們必需要這麼作。 好比你在vue的生命週期的 mounted() 鉤子函數進行的 DOM 操做必定要放在 Vue.nextTick()的回調函數中。

Vue.$nextTick(callback)，當dom發生變化，更新後執行的回調。

由於在 mounted（） 鉤子函數執行的時候 DOM 其實並未進行任何的渲染，而此時進行的 DOM 操做無異於徒勞，因此此處必定要將 DOM 操做的js代碼 放到 Vue.$nextTick() 的回調函數中。

Vue.$nextTick()不須要全局 Vue，在函數回調中的 this 將自動綁定到當前Vue實實例上。

Vue.component('example', {
  template: '<span>{{ message }}</span>',
  data: function () {
    return {
      message: '未更新'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = '更新'
      console.log(this.$el.textContent) // => '未更新'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => '已更新'
      })
    }
  }
}
複製代碼

$nextTick() 返回的是一個 Promise 對象，因此能夠使用新的 ES2016 async/await 語法完成相同的事：

methods: {
    updateMessage: function () {
      this.message = '更新'
      console.log(this.$el.textContent) // => '未更新'
      await this.$nextTick()
      console.log(this.$el.textContent) // => '已更新'
    }
}
複製代碼

Vue.nextTick(callback)，當數據發生變化，更新後執行回調。

爲了在數據變化以後等待 Vue完成更新 DOM，能夠在數據變化以後當即使用 Vue.nextTick()。這樣回調函數想在 Dom更新完成以後被調用。

<div id="example">{{message}}</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // 更改數據
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
  vm.$el.textContent === 'new message' // true
})
複製代碼