作用:
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