1、官網(wǎng)說(shuō)法

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

核心點(diǎn)有2個(gè)：DOM 更新和獲取更新后的 DOM。

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

2、DOM 更新

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

通過(guò)代碼我們驗(yàn)證下：不是數(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>

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

異步執(zhí)行DOM更新

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

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

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

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

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>

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

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

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

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

最新評(píng)論