关于事件循环，vue中nexttick实现的问题

Question

先说一下我对整个事件循环的简单理解：
单个宏任务-》所有微任务-》浏览器UI渲染-》（一个事件循环）单个宏任务

所以我认为nexttick的callback一定是放在UI渲染之后才执行的

但今天看了一下nexttick的实现，居然是优先使用promise，那promise.then是微任务，callback执行理论上还是当前的tick内，就是浏览器还没渲染，此时nexttick的callback内取dom为什么更新了呢？

然后有两个奇怪的case

<div ref="msg">{{msg}}</div>

data(){
    return {
        msg: 1
    }
}

我在js尝试两种写法

this.msg = 2
this.nextTick(()=>{
    console.log(this.$refs.msg.innerText)
})
this.msg = 3

// 此时innerText为什么输出为3？

---

this.nextTick(()=>{
    console.log(this.$refs.msg.innerText)
})
this.msg = 3

// 此时innerText为什么输出为1？

Answer 1

单个宏任务-》所有微任务-》浏览器UI渲染-》（一个事件循环）单个宏任务

这个理解不对，讲道理有的操作dom会造成重新计算，比如说你修改了css，然后获取宽高，然后又又改了css，又获取宽高。浏览器必须渲染计算才能给出你值。

---

至于你说的 UI渲染 和 能获取到 是两回事。 看下面这个例子，你操作了dom，内容其实已经改变，但是因为 UI 并没有渲染。

console.log(document.body.innerHTML.length)
document.body.innerHTML = ''
console.log(document.body.innerHTML.length)
now = Date.now();
while( Date.now() - now < 2000){

}
console.log(document.body.innerHTML.length)

---

接下来再说为什么 vue 使用的是 promise。他其实并不是在等 UI渲染，而是在等他自己修改dom。之前他使用过 setTimeout，在部分设备上渲染会晚好久（应该有个 issue）。