也就是说vue的视图更新 nextTick(flushSchedulerQueue)等同于setTimeout(flushSchedulerQueue, 0)，会异步执行flushSchedulerQueue函数，所以我们在this.msg = hello 并不会立即更新dom。
要想在dom更新后读取dom信息，我们需要在本次异步任务创建之后创建一个异步任务。
异步队列
为了验证这个想法我们不用nextTick，直接用setTimeout实验一下。如下面代码，验证了我们的想法。
<template> <div>{{msg}}</div> </template> <script> export default { name: 'index', data () { return { msg: 'hello' } }, mounted () { this.msg = 'world' let box = document.getElementsByClassName('box')[0] setTimeout(() => { console.log(box.innerHTML) // world }) } }
如果我们在数据修改前nextTick ，那么我们添加的异步任务会在渲染的异步任务之前执行，拿不到更新后的dom。
<template> <div>{{msg}}</div> </template> <script> export default { name: 'index', data () { return { msg: 'hello' } }, mounted () { this.$nextTick(() => { console.log(box.innerHTML) // hello }) this.msg = 'world' let box = document.getElementsByClassName('box')[0] } }
3 总结
vue为了保证性能，会把dom修改添加到异步任务，所有同步代码执行完成后再统一修改dom，一次事件循环中的多次数据修改只会触发一次watcher.run()。也就是通过nextTick，nextTick会优先使用microTask创建异步任务。
vue项目中如果需要获取修改后的dom信息，需要通过nextTick在dom更新任务之后创建一个异步任务。如官网所说，nextTick会在下次 DOM 更新循环结束之后执行延迟回调。