nextTick出现原因

• vue框架中当你修改了响应式数据后，视图(DOM页面)并不会立即更新，代表更新过程并非同步。
• vue将所有变更数据存放在一个队列中，集中在一个tick中，在下一个tick中统一更新视图。

tick解释:

主线程的执行过程就是一个 tick，而所有的异步结果都是通过 “任务队列” 来调度。

• 因为只执行一次更新，所以可以避免不必要的性能开销。
• 因为业务需求，可能需要在数据更新后立即操作DOM，此时就需要用到nextTick。
• nextTick的作用就是延迟回调到下次DOM更新循环之后执行。

更新流程

响应式数据更新=>vue更新队列=>DOM更新=>调用nextTick回调

场景案例

<template>
  <div>
    <div ref="box">hello</div>
    <button @click="change">change</button>
  </div>
</template>
<script setup lang="ts">
const msg = ref('hello');
const box = ref<HTMLDivElement>()
const change = () => {
  msg.value = 'world';
  console.log(msg.value); // world
  box.value?.innerText // hello
  // 更新DOM节点后调用nextTick
  nextTick(() => {
    console.log(msg.value); // world
    box.value?.innerText // world
    // 此时DOM节点已经更新,可以对新DOM节点操作
  });
};
</script>

总结

• nextTick的作用就是延迟回调到下次DOM更新循环之后执行。
• nextTick的回调函数会在DOM更新后执行，可以对新DOM节点操作。