這里是引用

vue2-nextTick

1. 什么是nextTick

• 先來(lái)看官方定義

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

• 云里霧里，啥意思呢，其實(shí)本質(zhì)就是事件循環(huán)、同步和異步的問(wèn)題
• 不懂事件循環(huán)相關(guān)問(wèn)題的 ，看這篇文章
  一文大白話講清楚javascript同步任務(wù)，異步任務(wù)，主線程，宏任務(wù)，微任務(wù),事件循環(huán)以及async和await等關(guān)系
• 說(shuō)白了，就是VUE在更新DOM時(shí)是異步執(zhí)行的，會(huì)開啟一個(gè)異步更新隊(duì)列，等待在下一個(gè)事件循環(huán)中執(zhí)行這個(gè)隊(duì)列中的所有修改。
• 那么問(wèn)題就來(lái)了，有時(shí)候，我在更新完數(shù)據(jù)后，想拿到更新后的DOM，怎么辦，因?yàn)檫@時(shí)候DOM更新可能還在隊(duì)列里面等待執(zhí)行呢，這時(shí)候我就創(chuàng)建一個(gè)回調(diào)函數(shù)，把這個(gè)函數(shù)添加到微任務(wù)隊(duì)列中，在更新隊(duì)列執(zhí)行完后，會(huì)執(zhí)行所有的微任務(wù)隊(duì)列的回調(diào)函數(shù)，這樣保證回調(diào)函數(shù)在更新隊(duì)列執(zhí)行完之后執(zhí)行，這個(gè)時(shí)候我們就可以在回調(diào)函數(shù)里面獲取到更新后的DOM了
• 那我們?cè)趺窗鸦卣{(diào)函數(shù)添加到微任務(wù)隊(duì)列里面呢，就是通過(guò)nextTick

2. nextTick的使用

• Vue.nextTick（callback）和this.nextTick（callback）都可以實(shí)現(xiàn)
• 我們實(shí)現(xiàn)一個(gè)計(jì)數(shù)器，利用nextTick獲取更新后的DOM

<template><div><p>{{count}}</p><button @click="add">ADD</button></div>
</template>
<script>export default{data(){return{count:0}},methods:{add(){this.count++}}}
</script>

• 在這個(gè)組件中，我們有一個(gè)計(jì)數(shù)器和一個(gè)按鈕，每次點(diǎn)擊按鈕，計(jì)數(shù)器增加1，如果我們?cè)谟?jì)數(shù)器更新后想要拿到更新后的DOM，就可以使用nextTick

 methods:{add(){this.count++this.nextTick(()=>{console.log(this.$el.textContent)})}
}

3. nextTick的應(yīng)用場(chǎng)景

1. 在更新DOM后獲取DOM狀態(tài)
2. 在更新DOM后執(zhí)行依賴于DOM的操作
3. 在更新DOM后，執(zhí)行第三方庫(kù)