vue3.0中使用nextTick

32 篇文章 0 订阅
本文对比了Vue 3.0和2.0中nextTick的使用方法,阐述了其在DOM更新周期中的作用。在Vue 3.0中,通过import导入nextTick并在setup函数内配合异步操作或直接修改响应式属性来确保DOM更新后再执行回调。而在Vue 2.0中,$nextTick常用于组件内改变状态后确保DOM更新。通过对nextTick的运用,开发者可以更好地控制组件的渲染时机。
摘要由CSDN通过智能技术生成

前言:

这里分享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
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值