nextTick执行顺序
来源:4-9 nextTick

weixin_慕粉6116347
2021-02-24
- 当点击change时,会执行Vue源码中的nextTick方法,该方法把将要执行的任务推入到一个队列中,在下一个tick时,同步执行。
- 当源码走第一次执行nextTick方法时,会把this.nextTikc回到放到一个callbacks数组里,也就是会在任务队里添加一个异步任务,当走到this.nextTick().then()时,向队列添加异步任务时,也返回了一个异步任务Promise,在then方法中会执行flushCallbacks回调,然后再执行我们自己写的Promise回调,最后执行this.msg = 'hello vue’时,也会添加一个异步任务(flushSchedulerQueue),这个异步任务里会执行getter,数据更新与重新渲染等。
- 依次执行callbacks数组里的任务,首先会执行第一个任务,也就是this.nextTick,此时数据还没变化,所以输出’nextTick:hello world’,然后执行this.nextTick().then(),此时该方法在源码里会返回一个Pomise,然后再then方法执行它,所以它会在callbacks三个任务执行完后,最后执行它,继续执行,执行flushSchedulerQueue函数进行数据变化执行getter,数据更新最后更新渲染页面,该函数执行完成后,此时页面已经刷新,数据变成hello vue,最后执行this.$nextTick().then(),此时打印出’nextTick with promise:hello vue’
老师是这样理解吗?
写回答
1回答
-
ustbhuangyi
2021-02-25
此时 DOM 还没变化,因为还没有更新,数据已经变了的,其它理解没啥问题022021-02-25
相似问题