定义
在下次DOM更新循环结束之后执行延迟回调。
在修改数据之后立即使用这个方法,获取更新后的DOM。实际上在派发更新过程中,同步任务执行之后会执行nextTick方法,参数是一个watcher队列执行函数。目的是当本次事件循环中所有的数据变化完成后,异步批量执行watcher队列的回调来实现DOM更新。所以在修改数据之后立即使用这个方法,就相当于nextTick执行更新了DOM的回调之后,再来执行这个nextTick里面的回调函数。
用途
需要在视图更新之后,基于新的视图进⾏操作。
实现原理
nextTick接收一个函数作为参数,这个函数也可以理解成一个回调函数。nextTick内部其实存储回调函数的一个队列数组,当外面执行同步执行几个nextTick方法的时候,会将这几个nextTick方法的参数存储到回调函数队列中。然后在nextTick的内部会创建一个异步任务。
运行环境不同生成的异步任务的方式和结果也可能不同,具体的顺序如下:
- 判断是否支持Promise,如果支持就在Promise.then方法的回调中去遍历执行队列数组里的回调函数;
- 判断是否支持MutationObserver,如果支持就内部创建一个DOM元素,模拟修改DOM元素,以这种方式来执行监听DOM变化的回调函数,在这个回调函数中遍历执行队列数组里的回调函数;
- 判断是否支持setImmediate,如果支持就在setImmediate回调中遍历执行队列数组里的回调函数;
- 如果以上几种都不支持,setTimeout回调中遍历执行队列数组里的回调函数。
前面两种方式生成的异步任务是微任务,后面两种生成的异步任务是宏任务。Vue2.x不同的版本对于这个过程的实现可能会有细微差异,但是目的就是生成一个异步任务,这个任务执行的时间越早越好。
nextTick还有一个实现细节,就是当参数没传且运行环境支持Promise的时候,会返回一个Promise的实例,这个小功能可以按需使用。