vue3.0中使用nextTick方式
作者:浩星
这篇文章主要介绍了vue3.0中使用nextTick方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
这里分享3.0和2.0 的方法对比
nextTick 是将回调推迟到下一个 DOM 更新周期之后执行。
在更改了一些数据以等待 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(() => { //你要执行的方法 this.abc = true })
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。