1、官網(wǎng)說法

在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個方法，獲取更新后的 DOM。

核心點有2個：DOM 更新和獲取更新后的 DOM。

DOM 更新，可以理解為：Vue 的DOM更新機制，那 Vue 的DOM更新機制是什么？

2、DOM 更新

首先，我們要知道：Vue實現(xiàn)響應(yīng)式并不是數(shù)據(jù)發(fā)生變化之后DOM立即變化，而是異步執(zhí)行DOM更新的。

通過代碼我們驗證下：不是數(shù)據(jù)發(fā)生變化之后DOM立即變化

<template>
  <div class="test">
    <div>
      <button @click="test" ref="btn">{{ msg }}</button>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      msg: '按鈕'
    }
  },
  methods: {
    test () {
      this.msg = '信息改變了。。。。'
      console.log('打印結(jié)果：' + this.$refs.btn.innerText) // 打印結(jié)果：按鈕
    }
  }
}
</script>

此時log結(jié)果是：打印結(jié)果：‘按鈕‘。而不是后來的 ‘信息改變了。。。。’，
原因：Vue的響應(yīng)式是異步執(zhí)行DOM更新。

異步執(zhí)行DOM更新

Vue 在更新 DOM 時是異步執(zhí)行的。只要偵聽到數(shù)據(jù)變化，Vue 將開啟一個隊列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)變更。如果同一個 watcher 被多次觸發(fā)，只會被推入到隊列中一次。這種在緩沖時去除重復(fù)數(shù)據(jù)對于避免不必要的計算和 DOM 操作是非常重要的。然后，在下一個的事件循環(huán) “tick" 中，Vue 刷新隊列并執(zhí)行實際（已去重的）工作。

（1）所有同步任務(wù)都在主線程上執(zhí)行，形成一個執(zhí)行棧（execution context stack）。
（2）主線程之外，還存在一個"任務(wù)隊列"（task queue）。只要異步任務(wù)有了運行結(jié)果，就在"任務(wù)隊列"之中放置一個事件。
（3）一旦"執(zhí)行棧"中的所有同步任務(wù)執(zhí)行完畢，系統(tǒng)就會讀取"任務(wù)隊列"，看看里面有哪些事件。那些對應(yīng)的異步任務(wù)，于是結(jié)束等待狀態(tài)，進入執(zhí)行棧，開始執(zhí)行。
（4）主線程不斷重復(fù)上面的第三步。
主線程不斷執(zhí)行任務(wù)、獲取任務(wù)、執(zhí)行任務(wù)……的過程叫做事件循環(huán)

簡單的理解：
vue在修改數(shù)據(jù)后，視圖不會立刻更新，而是等同一事件循環(huán)中的所有數(shù)據(jù)變化完成以后，再進行視圖更新.

為什么不同步進行DOM更新呢？
因為如果同步進行DOM更新，則每次對響應(yīng)式數(shù)據(jù)進行修改就都會觸發(fā)setter -> 通知watcher -> 觸發(fā)re-render -> 生成new vnode(vdom) -> patch（更新真實DOM）。如果每次修改數(shù)據(jù)都會走一遍這個流程是非常消耗性能的，所以使用異步更新 DOM 的策略，先對數(shù)據(jù)修改進行整合，再使用最終的整合結(jié)果一次性對 DOM 進行更新。

3、獲取更新后的 DOM

<template>
  <div class="test">
    <div>
      <button @click="test" ref="btn">{{ msg1 }}</button>
    </div>
    <div>
      <button @click="test2" ref="btn">{{ msg2 }}</button>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      msg1: '按鈕1',
      msg2: '按鈕2'
    }
  },
  methods: {
    test () {
      this.msg1 = '信息改變了。。。。'
      console.log('打印結(jié)果：' + this.$refs.btn.innerText) // 打印結(jié)果：按鈕
    },
    test2 () {
      this.msg2 = '使用this.$nextTick后'
      this.$nextTick(function () {
        console.log('打印結(jié)果：' + this.$refs.btn.innerText) // 打印結(jié)果：使用this.$nextTick后
      })
    }
  }
}
</script>

通過使用this.$nextTick，此時的打印結(jié)果就可以獲取到打印結(jié)果：使用this.$nextTick后的信息。

4、小結(jié)：this.$nextTick()的使用場景

• 在Vue生命周期的created()鉤子函數(shù)進行的DOM操作一定要放在Vue.nextTick()的回調(diào)函數(shù)中。原因是在created()鉤子函數(shù)執(zhí)行的時候DOM 其實并未進行任何渲染，而此時進行DOM操作無異于徒勞，所以此處一定要將DOM操作的js代碼放進Vue.nextTick()的回調(diào)函數(shù)中。與之對應(yīng)的就是mounted鉤子函數(shù)，因為該鉤子函數(shù)執(zhí)行時所有的DOM掛載和渲染都已完成，此時在該鉤子函數(shù)中進行任何DOM操作都不會有問題 。
• 在數(shù)據(jù)變化后要執(zhí)行的某個操作，當(dāng)你設(shè)置 this.msg1 = ‘信息改變了。。。。’ ，DOM并不會馬上更新，而是在異步隊列被清除,也就是下一個事件循環(huán)開始時執(zhí)行更新時才會進行必要的DOM更新。如果此時你想要根據(jù)更新的 DOM 狀態(tài)去做某些事情，就會出現(xiàn)問題。。為了在數(shù)據(jù)變化之后等待 Vue 完成更新 DOM ，可以在數(shù)據(jù)變化之后立即使用 Vue.nextTick(callback) 。這樣回調(diào)函數(shù)在 DOM 更新完成后就會調(diào)用。

到此這篇關(guān)于Vue中this.$nextTick()的具體使用的文章就介紹到這了,更多相關(guān)Vue this.$nextTick() 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論