vue3.0中使用nextTick方式
更新時間：2024年04月26日 09:21:19 作者：浩星
這篇文章主要介紹了vue3.0中使用nextTick方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
這里分享3.0和2.0 的方法對比
nextTick 是將回調(diào)推遲到下一個 DOM 更新周期之后執(zhí)行。
在更改了一些數(shù)據(jù)以等待 DOM 更新后立即使用它
vue3.0
1、引入
import { nextTick } from 'vue'2、具體使用，配合異步
setup() {
const message = ref('Hello!')
const changeMessage = async newMessage => {
message.value = newMessage
await nextTick()
console.log('Now DOM is updated')
}
}3、具體使用，普通
方法里：
setup () {
let otherParam = reactive({
showA:false
})
nextTick(()=>{
otherParam.showA = true
})
return {
otherParam
}
}頁面上：
<a-boo v-if="otherParam.showA"></a-boo>
vue2.0
this.abc = false
this.$nextTick(() => {
//你要執(zhí)行的方法
this.abc = true
})總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了Vue.nextTick 的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
隨著前端技術(shù)的發(fā)展,TypeScript 已經(jīng)成為了許多開發(fā)者的首選語言之一,因為它提供了靜態(tài)類型檢查,可以幫助開發(fā)者在編寫代碼階段就發(fā)現(xiàn)錯誤,本文將詳細(xì)介紹如何在 Vue 3 中配置 TypeScript,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了Vue2.x響應(yīng)式及簡單的示例，應(yīng)用了簡單的源代碼進(jìn)行講解，感興趣的小伙伴可以參考一下，希望可以幫助到你2021-08-08
這篇文章主要介紹了vue實現(xiàn)一個單獨的組件注釋，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
下面小編就為大家分享一篇vue2.0 子組件改變props值,并向父組件傳值的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue?scss后綴文件background-image路徑錯誤的解決
這篇文章主要介紹了vue?scss后綴文件background-image路徑錯誤的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
vue搭建本地JSON靜態(tài)數(shù)據(jù)服務(wù)器全過程
這篇文章主要介紹了vue搭建本地JSON靜態(tài)數(shù)據(jù)服務(wù)器全過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)登錄界面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要介紹了vue項目引入Iconfont圖標(biāo)庫的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-10-10
這篇文章主要給大家介紹了關(guān)于vue中事件綁定的相關(guān)資料,事件綁定在Web開發(fā)中非常常見,我們經(jīng)常需要在頁面中為某個DOM元素綁定事件,如點擊、鼠標(biāo)移動、鍵盤敲擊等等,需要的朋友可以參考下2023-09-09