vue在更新DOM时是异步执行的。当数据发生变化,vue将开启一个异步更新队列,视图需要等队列中所有数据变化完成之后,再统一进行更新。
有了nextTick机制,只需要更新一次视图,所有nextTick本质是一种优化策略
使用场景:
如果想要在修改数据之后立刻得到更新后的DOM结构,可以使用vue.nextTick()
在组件内实例方法只需要通过this.$nextTick(), 并且回调函数中的this将自动绑定到当前的vue实例上
this.message = ‘修改后的值‘
console.log(this.$el.textContent) // => ‘原始的值‘
this.$nextTick(()=> {
console.log(this.$el.textContent) // => ‘修改后的值‘
})