vue3中nextTick()應(yīng)用實(shí)例詳解
前言
在Vue3中，可以使用nextTick函數(shù)來(lái)延遲執(zhí)行某些操作，這些操作會(huì)在下一次DOM更新周期之后執(zhí)行。這個(gè)函數(shù)通常用于在數(shù)據(jù)更新后，等待DOM更新之后執(zhí)行一些操作，比如獲取DOM元素的尺寸、位置等。
nextTick()
例如，以下一個(gè)切換元素顯示的組件：
<template>
<div>
<button @click="handleClick">顯示/移除</button>
<div v-if="show" ref="content">我是一個(gè)元素</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const show = ref(true)
const content = ref()
const handleClick = () => {
show.value = !show.value
console.log(show.value, content.value)//true null
}
</script>打印結(jié)果：
如果show是true，那么content是null,這意味著 DOM 與組件的數(shù)據(jù)不同步。
我們加上nextTick()
<template>
<div>
<button @click="handleClick">顯示/移除</button>
<div v-if="show" ref="content">我是一個(gè)元素</div>
</div>
</template>
<script setup>
import { ref, nextTick } from 'vue'
const show = ref(true)
const content = ref()
const handleClick = () => {
show.value = !show.value
nextTick(() => {
console.log(show.value, content.value)
})
}
</script>打印結(jié)果：
當(dāng)show為true時(shí)，獲取到dom。
nextTick() 與異步/等待
如果nextTick()不帶參數(shù)調(diào)用，則該函數(shù)返回一個(gè)promise，該promise在組件數(shù)據(jù)更改到達(dá) DOM 時(shí)解析。
這有助于利用更具可讀性的async/await語(yǔ)法。 如下例子：
<template>
<div>
<button @click="handleClick">顯示/移除</button>
<div v-if="show" ref="content">我是一個(gè)元素</div>
</div>
</template>
<script setup>
import { ref, nextTick } from 'vue'
const show = ref(true)
const content = ref()
const handleClick = async () => {
show.value = !show.value
console.log(show.value, content.value)
await nextTick()
console.log(show.value, content.value)
}
</script>執(zhí)行結(jié)果：
總結(jié)
當(dāng)你更改組件的數(shù)據(jù)時(shí)，Vue3 會(huì)異步更新 DOM。
如果你想捕捉組件數(shù)據(jù)變化后 DOM 更新的時(shí)刻，那么你需要使用nextTick(callback) 函數(shù)。
它們的單個(gè)callback參數(shù)在 DOM 更新后立即被調(diào)用：并且你可以保證獲得與組件數(shù)據(jù)同步的最新 DOM。
或者，如果你不向nextTick() 提供回調(diào)參數(shù)，那么這些函數(shù)將返回一個(gè)在 DOM 更新時(shí)被解析的promise。
到此這篇關(guān)于vue3中nextTick()應(yīng)用的文章就介紹到這了,更多相關(guān)vue3 nextTick()應(yīng)用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
validate?注冊(cè)頁(yè)的表單數(shù)據(jù)校驗(yàn)實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了validate?注冊(cè)頁(yè)的表單數(shù)據(jù)校驗(yàn)實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
vue父子組件傳值以及單向數(shù)據(jù)流問(wèn)題詳解
大家應(yīng)該都知道父組件可以向子組件通過(guò)屬性形式傳遞參數(shù),傳遞的參數(shù)也可以隨時(shí)隨意修改;但子組件不能修改父組件傳遞過(guò)來(lái)的參數(shù),所以下面這篇文章主要給大家介紹了關(guān)于vue父子組件傳值以及單向數(shù)據(jù)流問(wèn)題的相關(guān)資料,需要的朋友可以參考下2021-09-09
vue中各選項(xiàng)及鉤子函數(shù)執(zhí)行順序詳解
今天小編就為大家分享一篇vue中各選項(xiàng)及鉤子函數(shù)執(zhí)行順序詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue結(jié)合g6實(shí)現(xiàn)樹(shù)級(jí)結(jié)構(gòu)(compactBox?緊湊樹(shù))
本文主要介紹了vue結(jié)合g6實(shí)現(xiàn)樹(shù)級(jí)結(jié)構(gòu)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
Vue組件實(shí)現(xiàn)旋轉(zhuǎn)木馬動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了Vue組件實(shí)現(xiàn)旋轉(zhuǎn)木馬動(dòng)畫(huà)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
vue3.x項(xiàng)目中,出現(xiàn)紅色波浪線(xiàn)問(wèn)題及解決
這篇文章主要介紹了vue3.x項(xiàng)目中,出現(xiàn)紅色波浪線(xiàn)問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue前端img訪(fǎng)問(wèn)鑒權(quán)后端進(jìn)行攔截的代碼示例
路由攔截是一種在用戶(hù)訪(fǎng)問(wèn)特定頁(yè)面之前對(duì)其進(jìn)行攔截和處理的機(jī)制,下面這篇文章主要給大家介紹了關(guān)于vue前端img訪(fǎng)問(wèn)鑒權(quán)后端進(jìn)行攔截的相關(guān)資料,需要的朋友可以參考下2024-03-03
iview-table組件嵌套input?select數(shù)據(jù)無(wú)法雙向綁定解決
這篇文章主要為大家介紹了iview-table組件嵌套input?select數(shù)據(jù)無(wú)法雙向綁定解決示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
vue實(shí)現(xiàn)自定義"模態(tài)彈窗"組件實(shí)例代碼
頁(yè)面中會(huì)有很多時(shí)候需要彈窗提示,我們可以寫(xiě)一個(gè)彈窗組件,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)自定義"模態(tài)彈窗"組件的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-12-12
Vue.js組件tree實(shí)現(xiàn)省市多級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了Vue.js組件tree實(shí)現(xiàn)省市多級(jí)聯(lián)動(dòng)的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12