Vue中的updated和$nextTick

$nextTick用法：將回調延遲到下次 DOM 更新循環之后執行。在修改數據之后立即使用它，然后等待 DOM 更新。

updated用法：由於數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之后會調用該鈎子。當這個鈎子被調用時，組件 DOM 已經更新，所以你現在可以執行依賴於 DOM 的操作。

this.$nextTick()可以用作局部的數據更新后DOM更新結束后的操作，全局的可以用updated生命周期函數

在vue中操作DOM--this.$nextTick()

異步更新隊列

可能你還沒有注意到，Vue 在更新 DOM 時是異步執行的。只要偵聽到數據變化，Vue 將開啟一個隊列，並緩沖在同一事件循環中發生的所有數據變更。
（也就是說數據變化后，DOM不會馬上更新，根據數據更新DOM的事件被放入異步隊列中了）
如果同一個 watcher 被多次觸發，只會被推入到隊列中一次。這種在緩沖時去除重復數據對於避免不必要的計算和 DOM 操作是非常重要的。然后，在下一個的事件循環“tick”中，Vue 刷新隊列並執行實際 (已去重的) 工作。

例如，當你設置 vm.someData = 'new value'，該組件不會立即重新渲染。當刷新隊列時，組件會在下一個事件循環“tick”中更新。多數情況我們不需要關心這個過程，但是如果你想基於更新后的 DOM 狀態來做點什么，這就可能會有些棘手。雖然 Vue.js 通常鼓勵開發人員使用“數據驅動”的方式思考，避免直接接觸 DOM，但是有時我們必須要這么做。為了在數據變化之后等待 Vue 完成更新 DOM，可以在數據變化之后立即使用 Vue.nextTick(callback)。這樣回調函數將在 DOM 更新完成后被調用。
（在這個更新DOM的隊列結束后，就會調用nextTick，從而執行里面的callback）

例如：

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) // => '已更新'
      })
    }
  }
})

遇到過的問題：當使用異步調用到的資源來修改data的內容時（比如數據更改后新增了一個dom）
this.$nextTick () {修改這個新增dom里面的內容}要放在修改data的代碼的后面，不然可能callback中對於dom的修改不生效。