vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3.0使用nextTick

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
})

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文