非同步更新佇列：

首先我們要對vue的資料更新有一定理解： vue是依靠資料驅動檢視更新的，該更新的過程是非同步的。

即：當偵聽到你的資料發生變化時， Vue將開啟一個佇列（該佇列被Vue官方稱為非同步更新佇列）。

檢視需要等佇列中所有資料變化完成之後，再統一進行更新。示例：

<div id="App">
    <input type="button" value="改變文字" @click="change">
    <p ref="myP">{{str}}</p>
</div>
<script>
    new Vue({
        el:"#App",
        data:{
            str:"我之前很瘦的。"
        },
        methods:{
            change(){
                this.str = "現在超胖了！";
                // 輸出結果：我之前很瘦的。
                console.log(this.$refs.myP.innerText)
            }
        }
    })
</script>

通過以上示例的輸出結果可以有力證明：Vue 實現的響應式並不是資料發生變化之後檢視立即變化。

獲取更新之後的DOM

Vue官方為了避免開發者直接接觸檢視，鼓勵大家以"資料驅動"的方式進行思考。但，現在的我們想基於更新後的檢視來搞點事情，該如何下手？

我們可以使用$nextTick(callback)。這裡的回撥函式（callback）將在資料更新完成，檢視更新完畢之後被呼叫。

更改上個示例中的changeStr方法如下：

    change () {
      this.str = '隱形的翅膀！'
      this.str = '鋼鐵的翅膀！！'
      this.$nextTick(() => {
          // 輸出結果：鋼鐵的翅膀！！
          console.log(this.$refs.myP.innerText)  
      })
    }    

從輸出的結果可以看出：我們可以通過$nextTick() 獲取到更新之後的DOM。

因為 $nextTick() 返回一個 Promise 物件，所以我們也可以使用async/await語法完成相同的事情：

 async change () {
    this.str = '隱形的世邦'
    this.str = '肖邦的翅膀'
    await this.$nextTick()
    console.log(this.$ref.myP.innerText)  
 }

或者

change(){
    this.str = "隱形的翅膀";
    this.$nextTick().then(()=>{
        // 輸出結果:騰格爾的翅膀
        console.log(this.$refs.myP.innerText);
    });
    this.str = "騰格爾的翅膀"
}

應用場景

1、如果要在created()鉤子函式中進行的DOM操作，由於created()鉤子函式中還未對DOM進行任何渲染，所以無法直接操作，需要通過$nextTick()來完成。

created () {
    this.$nextTick(()=>{
        this.$refs.myP.innerText = "鋼鐵的翅膀"
    })
}

注：在created()鉤子函式中進行的DOM操作，不使用$nextTick()會報錯：

//  Error in created hook: "TypeError: Cannot set property 'innerText' of undefined"
created(){
    this.$refs.myP.innerText = "鋼鐵的翅膀"
}

&n