nextTick执行顺序

来源:4-9 nextTick

weixin_慕粉6116347

2021-02-24

图片描述

  1. 当点击change时,会执行Vue源码中的nextTick方法,该方法把将要执行的任务推入到一个队列中,在下一个tick时,同步执行。
  2. 当源码走第一次执行nextTick方法时,会把this.nextTikc回到放到一个callbacks数组里,也就是会在任务队里添加一个异步任务,当走到this.nextTick().then()时,向队列添加异步任务时,也返回了一个异步任务Promise,在then方法中会执行flushCallbacks回调,然后再执行我们自己写的Promise回调,最后执行this.msg = 'hello vue’时,也会添加一个异步任务(flushSchedulerQueue),这个异步任务里会执行getter,数据更新与重新渲染等。
  3. 依次执行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

//img.mukewang.com/szimg/6037417a09065f2216080598.jpg

此时 DOM 还没变化,因为还没有更新,数据已经变了的,其它理解没啥问题


0
2
ustbhuangyi
回复
weixin_慕粉6116347
数据是 this.msg,已经修改过了呀
2021-02-25
共2条回复

Vue.js 源码深入解析 深入理解Vue实现原理

全方位讲解 Vue.js 源码,进阶高级工程师

4984 学习 · 1037 问题

查看课程