nextTick能否獲取到最新dom原理解析
前言
眾所周知，vue的dom更新操作時(shí)異步的，為了獲取更新后的dom官方提供了相應(yīng)的apinextTick,文檔中對該api的描述為：將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行 , 所謂的下一次，到底是哪一次呢？dom更新是異步任務(wù)，nextTick的回調(diào)也是異步任務(wù)，nextTick的回調(diào)中一定就能獲取到最新的dom么?
nextTick的實(shí)現(xiàn)原理
vue2x中
出于兼容性考慮，依次判斷瀏覽器是否支持，選擇使用對應(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)先級，執(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
- 圖解
以上就是nextTick能否獲取到最新dom原理解析的詳細(xì)內(nèi)容，更多關(guān)于nextTick獲取最新dom的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
TagsInput 是一種可編輯的輸入框，通過回車或者分號來分割每個(gè)標(biāo)簽，用回退鍵刪除上一個(gè)標(biāo)簽。這篇文章主要介紹了vue組件TagsInput的相關(guān)知識,需要的朋友可以參考下2020-05-05
vue-cli項(xiàng)目優(yōu)化方法- 縮短首屏加載時(shí)間
這篇文章主要介紹了vue-cli項(xiàng)目優(yōu)化 縮短首屏加載時(shí)間,需要的朋友可以參考下2018-04-04
在Vue實(shí)例中,data屬性是用戶定義的用于存儲數(shù)據(jù)的對象,而_data是Vue內(nèi)部用于存儲數(shù)據(jù)的對象,本文主要介紹了淺談vue中的data與_data的關(guān)系是什么,感興趣的可以了解一下2023-12-12
Vue使用echarts的完整步驟及解決各種報(bào)錯(cuò)
最近在項(xiàng)目中需要對數(shù)據(jù)進(jìn)行可視化處理,而眾所周知echarts是非常強(qiáng)大的插件,下面這篇文章主要給大家介紹了關(guān)于Vue使用echarts的完整步驟及解決各種報(bào)錯(cuò)的相關(guān)資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了vue項(xiàng)目部署上線遇到的問題及解決方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-06-06
由于一些演示需要對一些簡單頁面進(jìn)行配置,由于打包build后的vue項(xiàng)目基本已經(jīng)看不出原樣,因此需要?jiǎng)?chuàng)建一個(gè)文件,并在打包的時(shí)候不會進(jìn)行編譯,所以文件放在public,這篇文章主要給大家介紹了關(guān)于vue引用public文件夾中文件的多種方式,需要的朋友可以參考下2024-02-02
vue-router 是 Vue 的一個(gè)插件庫，適用于構(gòu)建單頁面應(yīng)用，這篇文章主要介紹了Vue?router?路由安裝以及使用,本文通過示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-10-10
這篇文章主要介紹了詳解vuex commit保存數(shù)據(jù)技巧，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了如何通過vue實(shí)現(xiàn)微博中常見的@人的功能，同時(shí)增加鼠標(biāo)點(diǎn)擊事件和一些頁面小優(yōu)化。感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2021-12-12
這篇文章主要介紹了關(guān)于Vue單元測試的幾個(gè)坑，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04