dom升级是异步任务,nextTick的实现基本原理

序言

大家都知道，vue的dom升级操作过程中多线程的，为了获得系统重装后的dom官方网带来了对应的apinextTick,word里对于该api的描写为：将调整延迟时间到下一次 DOM 升级循环之后实行 , 所说的后一次，究竟是哪一次呢？dom升级是异步任务，nextTick的调整都是异步任务，nextTick的调整中一定就可掌握到最新dom么?

nextTick的实现基本原理

vue2x中

出自于兼容模式考虑到，先后分辨电脑浏览器是否支持，选择用相匹配api

首先选择微任务，假如微任务都不兼容，就选择宏任务

vue3中：

放弃了兼容模式，直接用Promise,来达到nextTick

结果

由nextTick的源代码能够得知，nextTick实质就是创建了一个微任务（不顾及setTimeout），把它调整送入微任务队列。vue中一个事件循环中所有dom升级实际操作也是一个微任务，二者是同一优先，实行依次只于入团的依次相关，也就是说，假如你先写nextTick，继续写赋值语句（在这以前并没有开启dom升级更新的实际操作），那么在nextTick中获得的可能就并不是系统重装后的dom了

实例表明

• 比如下边的代码：

<template>
  <div class="demo">
    <p class="name">{{ name }}</p>
    <button @click="modify">改动</button>
  </div>
</template>
<script lang="ts" setup>
const name = ref("111");

const modify = () => {
  name.value = "222"; // 关键性的赋值语句，假如注释掉，然后就大不一样了
  nextTick(() => {
    const text = document.querySelector<HTMLElement>(".name").innerText;
    console.log(text);
  });
  name.value = "333";
};
</script>

以上编码，假如注释掉name.value = "2222",尽管nextTick句子下边也是有取值实际操作：name.value = "3333";,但是由于nextTick优秀入微任务队列，因此调整在于dom升级实行，所以也是获得的dom依然是老旧升级前dom

• 详解

• 源代码填补