前提
Vue实现响应式,并不是数据发生改变后,DOM立刻随之变化,从以下可以看出
而是等所有的数据发生改变后,才去更新DOM。那问题来了,如果我们就是要通过DOM拿到更新的值,
怎么获取更新后的DOM元素值呢,nextTick闪亮登场!
图示
作用
由此,我们可以推测其作用,在vue的数据发生改变后,DOM也更新后,才执行nextTick里面的代码。
在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM。
底层原理
nextTick 本质就是执行延迟回调的钩子,在下次 DOM 更新循环结束之后执行延迟回调。
为何要延迟回调,这跟前提里提到了Vue实现响应式原理有关,Vue是异步执行DOM更新的,这就导致了DOM不会立马更新,而nextTick则就是等到DOM更新后,再去执行回调,这就是说其为执行延迟回调的钩子。
即同一事件循环中的代码执行完毕 -> DOM 更新 -> nextTick callback触发