谈谈你对nextTick的理解

什么是nextTick为什么要使用nextTick呢？

• nextTick是一个异步方法，接收一个回调函数作为参数 因为vue中的dom更新是异步的，那么在一些场景下为了确保获取到数据更新后最新的dom，可以使用vue提供的nextTick方法，它的核心是利用了事件循环机制来实现的。

• 看看这个例子

<template>
  <div id="box">{{ txt }}</div>
</template>
 
<script>
export default {
  data() {
    return {
      txt: "Hello World"
    };
  },
  mounted() {
    this.txt = "cc";
    console.log(document.getElementById("box").innerText); // 这里打印的还是Hello World
    this.$nextTick(() => {
      console.log(document.getElementById("box").innerText); // 这里打印的是更新之后的cc
    });
  }
};
</script>

主要是利用了事件循环机制来实现nextTick，那事件循环是什么呢？

简单的画了个图，将就看看

js代码分为了同步代码和异步代码，他们的执行顺序是先执行同步再执行异步，代码开始执行会将同步推到执行栈里面执行，当执行栈清空之后，会执行异步，异步分为了宏任务和微任务，优先到微任务队列中查看是否有任务，如果有会遵循先进先出的原则推到执行栈里面执行，不断重复这样的操作直到微任务队列中没有任务，就会再到宏任务队列中也是跟微任务重复一样的操作，直到整个执行栈执行完毕

那么nextTick内部就是利用了这样的机制通过创建一个宏任务或者微任务的方式来实现，因为微任务的执行时机是在当前执行栈清空之后立即执行的，此时dom已经更新好了，所以考虑到执行时机的问题，所以vue中优先使用微任务来实现，至于使用微任务还是宏任务来实现取决于当前浏览器的支持，vue内部有一个timeFunc，这个函数内部会对当前环境进行不断的降级处理，尝试使用Promise.then、MutationObserver和setImmediate，如果这些都不支持最终才会使用settimeout

简单的理解为在下一次 事件循环结束时更新 DOMnextTick 的回调可以等到 DOM 更新完成后再执行操作。