关于nextTick的执行顺序

Question

关于这段代码的执行顺序，我想说一下我的理解：

代码依次执行, 第一次走源码中的nextTick方法时，则会调用timerFunc方法，向任务队列添加一个异步任务

flushCallbacks；当走到this.$nextTick().then(), 向队列添加回调的同时，也返回了一个异步任务Promsie。当任务队列添加完过后就会执行flushCallbacks回调，最后再执行Promise里的回调。 所以执行顺序是：this.$nextTick回调里的console —> dom更新 —> this.$nextTick().then()里的console。

语言有些混乱，部分技术点讲得不太准确，烦请老师纠正，谢谢！

Answer 1

ustbhuangyi 2020-09-08 13:53:02

你的结论是正确的，但是你清楚为什么 DOM 更新会在 回调 console 之后执行，而在 promise console 之前执行吗

• 提问者 同行人 #1

  在第一次走源码中的nextTick时， 就会执行timerFunc，向任务队列添加flushCallbacks，当执行到this.$nextTick()时，返回Promise。同步代码执行完后，则会先执行flushCallbacks 遍历调用callbacks里面的3个回调方法，当执行到第二个回调方法时，应该会调用Promise的_resolve方法，这个时候向任务队列添加then的回调吗？  等callbacks里3个回调执行完， 再走then的回调？

• ustbhuangyi 回复 提问者 同行人 #2

  如果把 this.title = "数据双向绑定" 这行代码放在函数最开始的地方执行呢，会影响顺序吗？

• 提问者 同行人 回复 ustbhuangyi #3

  更新dom—>回调函数—>promise  console