vue3.0中使用nextTick

时间:2025-03-30 07:07:59

前言:

这里分享3.0和2.0 的方法对比,

nextTick 是将回调推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立即使用它

vue3.0

1、引入

import { nextTick } from 'vue'

2、具体使用,配合异步

setup() {
    const message = ref('Hello!')
    const changeMessage = async newMessage => {
       = newMessage
      await nextTick()
      ('Now DOM is updated')
    }
  }

3、具体使用,普通

方法里:

 setup () {    
    let otherParam = reactive({
      showA:false
    })
    nextTick(()=>{
       = true
    })
  return {
      otherParam

    }


}

页面上:

<a-boo v-if=""></a-boo>

vue2.0

 = false
this.$nextTick(() => {
   //你要执行的方法
      = true
})