vue中的數據更新后的Dom操作 nextTick()

一、定義：

在下次 DOM 更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的 DOM。
簡單的理解是：當數據更新了，在dom中渲染后，自動執行該函數（也算是一個生命周期鈎子函數了）

二、nextTick() 使用原理

Vue是異步執行dom更新的，一旦觀察到數據變化，不會馬上更新dom，而是Vue就會開啟一個隊列，然后把在同一個事件循環 (event loop) 當中觀察到數據變化的 watcher 推送進這個隊列。如果這個watcher被觸發多次，只會被推送到隊列一次。這種緩沖行為可以有效的去掉重復數據造成的不必要的計算和DOm操作。而在下一個事件循環時，Vue會清空隊列，並進行必要的DOM更新。
當你設置 vm.someData = 'new value'，DOM 並不會馬上更新，而是在異步隊列被清除，也就是下一個事件循環開始時執行更新時才會進行必要的DOM更新。如果此時你想要根據更新的 DOM 狀態去做某些事情，就會出現問題。。為了在數據變化之后等待 Vue 完成更新 DOM ，可以在數據變化之后立即使用 Vue.nextTick(callback) 。這樣回調函數在 DOM 更新完成后就會調用。

三、使用場景

1、當項目中你想在改變DOM元素的數據后基於新的dom做點什么，對新DOM一系列的js操作都需要放進Vue.nextTick()的回調函數中；
簡單講就是：更改數據后當你想立即使用js操作新的視圖的時候需要使用它
場景：點擊一個按鈕改變數據然后一堆邏輯，然后讓一個文本框獲取焦點（更新數據，dom操作）

  <input type="text" ref="inputTitle" />
//直接在一頓邏輯之后添加文本框獲取焦點代碼，結果是獲取不了焦點
  this.$refs.inputTitle.focus()

正確做法是把dom操作放在nextTick回調中執行

this.$nextTick(function(){
	this.$refs.inputTitle.focus()
   })

2、Vue生命周期的created()鈎子函數進行的DOM操作一定要放在Vue.nextTick()的回調函數中，原因是在created()鈎子函數執行的時候DOM 其實並未進行任何渲染，而此時進行DOM操作無異於徒勞，所以此處一定要將DOM操作的js代碼放進Vue.nextTick()的回調函數中。與之對應的就是mounted鈎子函數，因為該鈎子函數執行時所有的DOM掛載已完成。

  created(){
    this.$nextTick(function(){  //不使用this.$nextTick()方法會報錯:Cannot set property 'innerHTML' of undefined
    this.$refs.myButton.innerHTML="created中更改了按鈕內容";  //寫入到DOM元素
    });
  }

3、在使用某個第三方插件時 ，希望在vue生成的某些dom動態發生變化時重新應用該插件，也會用到該方法，這時候就需要在 $nextTick 的回調函數中執行重新應用插件的方法。