這里是引用

vue2-nextTick

1. 什么是nextTick

• 先來看官方定義

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

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

2. nextTick的使用

• Vue.nextTick（callback）和this.nextTick（callback）都可以實現(xiàn)
• 我們實現(xiàn)一個計數(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>

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

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

3. nextTick的應用場景

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