Vue2中nextTick和promise的更新顺序

1. 数据的更新会触发watcher ，每次数据更新都会在更新队列中排队
2. 一个代码块中的nextTick，会在这个更新队列执行完（视图也更新）后执行 （微任务队列。 flushSchedulerQueue = [更新1，更新2，……，nextTick回调]

callbacks: [flushSchedulerQueue, ……]）

//<p id="p1">{{foo}}</p>

this.foo = Math.random()
console.log('1:' + this.foo);
this.foo = Math.random()
console.log('2:' + this.foo);

this.$nextTick(() => {
  console.log('p1.innerHTML:' + p1.innerHTML)
})

this.foo = Math.random()
console.log('3:' + this.foo);

//1:0.5088846186510239
//2:0.8737276659313911
//3:0.9666961500118043
//p1.innerHTML:0.9666961500118043

3. 如果代码块中出现promise等异步代码，那么会在callbacks中排队，也就是会等nextTick执行完后执行

this.foo = Math.random()
console.log('1:' + this.foo); 

Promise.resolve().then(() => {
  console.log('promise:' + p1.innerHTML)
})

this.$nextTick(() => { 
    console.log('p1.innerHTML:' + p1.innerHTML) 
}) 
//1:0.5088846186510239
//p1.innerHTML:0.5088846186510239
//promise.innerHTML:0.5088846186510239（这个在nextTick后输出）

4. 如果nextTick中有了新的数据更新，就会进入新的更新队列，新的更新队列清空视图才会更新
5. 如果一个代码块中有多个nextTick，那么这几个nextTick按顺序执行

总结

视图更新是在一个代码块中的全部 数据更新队列 执行完后更新。