nextTick能否獲取到最新dom原理解析

更新時(shí)間：2022年11月17日 14:21:31 作者：遠(yuǎn)山無期

這篇文章主要為大家介紹了nextTick能否獲取到最新dom原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

眾所周知，vue的dom更新操作時(shí)異步的，為了獲取更新后的dom官方提供了相應(yīng)的apinextTick,文檔中對(duì)該api的描述為：將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行 , 所謂的下一次，到底是哪一次呢？dom更新是異步任務(wù)，nextTick的回調(diào)也是異步任務(wù)，nextTick的回調(diào)中一定就能獲取到最新的dom么?

nextTick的實(shí)現(xiàn)原理

vue2x中

出于兼容性考慮，依次判斷瀏覽器是否支持，選擇使用對(duì)應(yīng)api

優(yōu)先選擇微任務(wù)，如果微任務(wù)都不支持，則選擇宏任務(wù)

vue3中：

拋棄了兼容性，直接使用Promise,來實(shí)現(xiàn)nextTick

結(jié)論

由nextTick的源碼可以看出，nextTick本質(zhì)就是創(chuàng)建了一個(gè)微任務(wù)（不考慮setTimeout），將其回調(diào)推入微任務(wù)隊(duì)列。vue中一個(gè)事件循環(huán)中的所有dom更新操作也是一個(gè)微任務(wù)，兩者屬于同一優(yōu)先級(jí)，執(zhí)行先后只于入隊(duì)的先后有關(guān)，換句話說，如果你先寫了nextTick，再寫賦值語句（在此之前沒有觸發(fā)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"; // 關(guān)鍵的賦值語句，如果注釋掉，結(jié)果就大不一樣了
  nextTick(() => {
    const text = document.querySelector<HTMLElement>(".name").innerText;
    console.log(text);
  });
  name.value = "333";
};
</script>

如上代碼，如果注釋掉name.value = "2222",雖然nextTick語句下面也有賦值操作：name.value = "3333";,但由于nextTick先進(jìn)入微任務(wù)隊(duì)列，所以回調(diào)先于dom更新執(zhí)行，所以是獲取的dom仍舊是舊的更新前的dom