vue3.0中使用nextTick方式
更新時(shí)間:2024年04月26日 09:21:19 作者:浩星
這篇文章主要介紹了vue3.0中使用nextTick方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
這里分享3.0和2.0 的方法對(duì)比
nextTick 是將回調(diào)推遲到下一個(gè) 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é)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
淺談Vue.nextTick 的實(shí)現(xiàn)方法
本篇文章主要介紹了Vue.nextTick 的實(shí)現(xiàn)方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10vue實(shí)現(xiàn)一個(gè)單獨(dú)的組件注釋
這篇文章主要介紹了vue實(shí)現(xiàn)一個(gè)單獨(dú)的組件注釋,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04vue?scss后綴文件background-image路徑錯(cuò)誤的解決
這篇文章主要介紹了vue?scss后綴文件background-image路徑錯(cuò)誤的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12vue搭建本地JSON靜態(tài)數(shù)據(jù)服務(wù)器全過程
這篇文章主要介紹了vue搭建本地JSON靜態(tài)數(shù)據(jù)服務(wù)器全過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07vue項(xiàng)目引入Iconfont圖標(biāo)庫的教程圖解
這篇文章主要介紹了vue項(xiàng)目引入Iconfont圖標(biāo)庫的相關(guān)知識(shí),非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10