vue的nextTick使用場景

首先我們需要明白vue是依靠數據驅動視圖更新的，而該更新的過程是異步的

換種說法也就是：Vue在偵聽到你的數據發生變化時， 將開啟一個隊列（該隊列被Vue官方稱為異步更新隊列），而視圖需要等隊列中所有數據變化完成之后，再統一進行更新。

這就是我們通常在數據變化后獲取節點使用this.$nextTick()的原因

 

那我們的nextTick使用場景便是在：

1.獲取數據更新之后的DOM

<p ref="myText">{{text}}</p>


change () {
      this.text = '在遠方的時候';
      this.$nextTick(() => {
          // 輸出結果：在遠方的時候
          console.log(this.$refs.myText.innerText)  
      })
}

2.created()中進行DOM操作

created () {
    this.$nextTick(()=>{
        this.$refs.myText.innerText = "你知不知道"
    })
}