vue2-nextTick

这里是引用

vue2-nextTick

1. 什么是nextTick

• 先来看官方定义

在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM

• 云里雾里，啥意思呢，其实本质就是事件循环、同步和异步的问题
• 不懂事件循环相关问题的 ，看这篇文章
  一文大白话讲清楚javascript同步任务，异步任务，主线程，宏任务，微任务,事件循环以及async和await等关系
• 说白了，就是VUE在更新DOM时是异步执行的，会开启一个异步更新队列，等待在下一个事件循环中执行这个队列中的所有修改。
• 那么问题就来了，有时候，我在更新完数据后，想拿到更新后的DOM，怎么办，因为这时候DOM更新可能还在队列里面等待执行呢，这时候我就创建一个回调函数，把这个函数添加到微任务队列中，在更新队列执行完后，会执行所有的微任务队列的回调函数，这样保证回调函数在更新队列执行完之后执行，这个时候我们就可以在回调函数里面获取到更新后的DOM了
• 那我们怎么把回调函数添加到微任务队列里面呢，就是通过nextTick

2. nextTick的使用

• Vue.nextTick（callback）和this.nextTick（callback）都可以实现
• 我们实现一个计数器，利用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>

• 在这个组件中，我们有一个计数器和一个按钮，每次点击按钮，计数器增加1，如果我们在计数器更新后想要拿到更新后的DOM，就可以使用nextTick

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

3. nextTick的应用场景

1. 在更新DOM后获取DOM状态
2. 在更新DOM后执行依赖于DOM的操作
3. 在更新DOM后，执行第三方库