vue:对三种获取更新后的dom的方式进行分析

一、问题分析

由于vue的异步更新机制，我们在同步代码中是无法获取到更新后的dom的信息的

针对这个问题，我们有三种解决方案获取更新后的dom:

1.nextTick()

2.setTimeout()

3.在微任务中获取

因为更新是在同步任务结束后，执行微任务之前，所以上面三种方式可以得到更新后的dom。

二、执行顺序分析

先看代码，下面的代码中，通过点击使得绑定的按钮元素高度增加，在js中通过打印来去观察不同获取该元素信息的方式的区别。

<template>
  <div class="page">
    <button
      @click="clickButton"
      ref="buttonRef"
      :style="{ height: `${height}px`, width: '60px' }"
    ></button>
    <div class="info">{{ height }}</div>
  </div>
</template>
<script setup lang="ts">
import { nextTick, ref } from "vue";
const height = ref(40);
const buttonRef = ref();
const clickButton = async () => {
  height.value = height.value + 10;
  console.log(buttonRef.value.style.height, "直接打印"); // 40px
  setTimeout(() => {
    console.log(buttonRef.value.style.height, "setTimeout0打印1"); // 50px
  }, 0);
  await console.log("dom已更新");
  setTimeout(() => {
    console.log(buttonRef.value.style.height, "setTimeout0打印2"); // 50px
  }, 0);
  setTimeout(() => {
    console.log(buttonRef.value.style.height, "setTimeout100打印"); // 50px
  }, 100);
  nextTick(() => {
    console.log(buttonRef.value.style.height, "nextTick打印"); // 50px
  });
  console.log("测试数据");
  console.log(buttonRef.value.style.height, "微任务打印"); // 50px
};
</script>
<style>
.page {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>

我们可以观察到，除了在同步代码中获取按钮元素的信息，都得到了更新后的按钮高度。同时我们可以发现，nextTick中的任务是在微任务队列的末尾的，如果把这段代码提前到同步任务中也是同样的效果。

由此，我们可以得出结论，获取更新后dom的速度，微任务中获取>nextTick中获取>宏任务中获取

三、为什么nextTick让任务进入微任务队列末尾而不是开头或者中间

1.避免无限循环。如果 nextTick 的回调被添加到队列的开头，那么在执行回调的过程中再次调用 nextTick 可能会导致无限循环，因为新产生的 nextTick 任务会立即执行，从而可能不断地往队列中添加新的任务。

2.性能优化。vue的异步更新是为了让同一个Tick中的数据变化完了再更新，将任务放入末尾也是同样的目的，可以尽可能减少不必要的dom操作。

3.便于调试。如果这个任务会到处都是那么数据的变化是难以预测的。

四、为什么优先使用nextTick()

1.nextTick的作用就是告诉vue这个dom更新好了，简单，稳定，可靠，语义强。

2.方便调试，避免无限循环，性能优化。

3.不用像settimeout一样把任务拖到下一个宏任务。