关于vue2.0的this.$nextTick的执行时机

额！先一句话总结一下吧

       this.$nextTick传入的函数和触发某个dom更新的函数时放在同一个队列里面的。

        不想写代码了，下面贴源码，并勾出来给大家看吧

vue的dom异步更新原理的源码

当修改data里面的数据时会经过setter去执行queueWatcher把对应watcher放入queue这个队列，

然后把flushSchedulerQueue这个函数（flushSchedulerQueue这个函数循环遍历queue这个队列来循环执行对应的watcher.run函数等）传入ntexttick这个函数（没错nexttick这个函数就是this.$nextTick这个函数，nexttick源码再下面第二张图和第三张图）并执行nexttick这个函数

然后咱们再看this.$nextTick的源码

通过nexttick源码可以看到在第一图中dom更新原理调用nexttick函数传入的flushSchedulerQueue这个函数其实又放到了callbacks这个队列里面，而我们通过调用this.$nextTick传入的函数也放入callbacks队列里面，然后再看timerFunc这个函数和flushCallbacks这个函数，flushCallbacks这个函数就是循环遍历callbacks里面函数并执行后清空队列callbacks，而timerFunc就是把flushCallbacks这个函数放到异步任务里面去执行的。

通过以上代码能得到以下几点

        1. dom更新和this.$nextTick传入的函数的执行都是异步的

        2.如果想要在this.$nextTick中获取修改后的data中数据，在同一个上下文中要放在修改数据之后

<div id="div">{{a}}</div>

this.$nextTick(() =>{ 

获取还是a的原始值

console.log(document.getElementById('div').innerHTML)

})

this.a = 100

this.$nextTick(() =>{

获取的时100

console.log(document.getElementById('div').innerHTML)

})

第一次写，如有错误请大家指正