理解Vue中的$nextTick()

有一個div，默認用了v-if隱藏，點擊按鈕之后，改變v-if的值讓他顯示出來，并且取到div中的值:

<div id=app>
  <div id="div" v-if="showDiv">我是顯示文本</div>
  <button @click="showAndGetText">獲取內容</button >
</div>
<script>
var app = new Vue({
  el: '#app',
  data () {
    return {
      showDiv : false
    },
    methods: {
      showAndGetText () {
        this.showDiv  = true
        let text = document.getElementById('div').innerHTML
        console.log(text)
      }
    }
  }
})
</script>

這段代碼并不難理解，但是控制臺回拋出一個'innerHTML' of null的錯誤，因為此時頁面并未完成渲染，它并沒有獲取到div元素，這里涉及到一個Vue的重要概念：異步更新隊列。

Vue在觀察到數據變化時并不是直接更新DOM，而是開啟一個隊列，并緩沖同一事件循環中發生的所有數據改變。

在緩沖時會去除重復的數據，這樣避免了不必要的計算和DOM操作。然后，在下一個時間循環Tick中，Vue刷新隊列并執行已去重的工作。

所以，如果你用一個for循環來動態改變數據100次，其實它只會應用最后一次改變，如果沒有這種機制，DOM就要重繪100次，這是我們不愿意看到的。

知道了Vue異步更新DOM原理之后，上面的現象就不難理解了，事實上在this.showDiv = true時，div仍然是沒有被創建出來的，下面的

let text =document.getElementById('div').innerHTML 
console.log(text)

此時，讀取的仍然是這一次事件循環的DOM，而實際上在這一次事件循環中，DOM并沒有更新，所以是讀取不到的。

我們需要等下一個Vue事件循環，DOM更新完成后再讀取，就可以讀取到。

那么這時就是$nextTick閃亮登場的時候：

<div id=app>
  <div id="div" v-if="showDiv">我是顯示文本</div>
  <button @click="showAndGetText">獲取內容</button >
</div>
<script>
var app = new Vue({
  el: '#app',
  data () {
    return {
      showDiv : false
    },
    methods: {
      showAndGetText () {
        this.showDiv  = true
        this.$nextTick(function () {
     	   let text = document.getElementById('div').innerHTML
    	   console.log(text)
        })
      }
    }
  }
})
</script>

這樣就取到我們想要的文本數據了。

理論上，我們不應主動去操作DOM，因為Vue核心思想是：數據驅動DOM，但在很多業務里，我們避免不了會操做某些DOM元素,這時我們就需要用到$nextTick。

Vue.js 通常鼓勵開發人員沿著“數據驅動”的方式思考，避免直接接觸 DOM。

this.$nextTick()官方介紹： 將回調延遲到下次 DOM 更新循環之后執行。 在修改數據之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一樣，不同的是：回調的 this 自動綁定到調用它的實例上。