对this.nextTick()的理解

作用:

vue中this.nextTick()的作用是在数据更新后立刻获取到dom中最新数据的方法

例如:

当我想要获取使用v-show='false'隐藏掉的input框时,逻辑上来讲是这么写的,先把控制v-show显示隐藏的变量变为true,再获取input

getFocus(){

this.show = true

let myInput = document.getElementById('myInput')

}

可这种方法是行不通的,无法获取到myInput框,需要加上this.$nextTick

getFocus(){

this.show = true

this.$nextTick(function(){

let myInput = document.getElementById('myInput')

})

}

这时就可以拿到myInput。

原理

this.$nextTick的回调方法会在下次tick时执行,而不是立刻执行。

vue中有一个很重要的概念:异步执行队列。当vue中数据发生变化时,vue不会立刻更改dom,而是打开一个队列,把同一事件循环中所有发生改变的数据都缓存起来,缓存的过程中会进行去重操作,减少不必要的dom操作,在下一个事件循环tick中刷新队列,并进行实际工作。nextTick的作用就是在下一个tick之后执行回调函数中的代码,这样就可以拿到最新的dom。

文章参考:https://www.cnblogs.com/leaf930814/p/7247478.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值