老师请问一下关于异步更新

Question

老师请问一下之前我一直理解是Vue中的异步更新是按照一次Event Loop中去执行的，就好比同步逻辑执行完毕之后关于微队列（比如Promise）也同时执行完毕后才开始重新渲染页面。可是事实好像并不是这个样子，请问一下老师Vue中的页面更新时机究竟是怎么一回事？

请问下不是按照这张图进行的异步更新原理吗？

就比如这段代码

```

setup() {

setup() {
    const data = ref(0)
    onMounted(() => {
        data.value = 3
        // 此时页面并不会更新
        debugger
        data.value = 4
        // 也不会更新
        debugger
        // 页面此时
        await new Promise((res) => res)
        // 页面更新了 data的值在Dom上已经变成了4了
        data.value = 5;
        await new Promise(res => res)
    })
}

请问一下老师能稍微解释一下吗，不是特别明白。我的理解是不应该等待同步代码执行完毕后然后在执行完所有的micro然后才进行页面更新吗。为什么就已经变成4了

Answer 1

前端工程师666777888 2021-04-01 12:51:19

await new Promise((res) => res)   这是什么意思   你怎么把res给返回了

res应该是个函数啊，resolve函数。你只有执行了res()    才会执行await下面的语句

Answer 2

前端工程师666777888 2021-04-01 12:48:56

async  await是成对出现的，为什么你的代码中只有await

Answer 3

ustbhuangyi 2020-10-08 13:48:17

因为两个 await 创建了两个 promise，这两个 promise 并不是在一个 tick 内一起创建的，第二个是在第一个执行完毕后才创建的，所以会在第一个 promise 执行完毕后，页面刷新了一次，然后这个时候才开始创建第二个 promise。

• 提问者 hy_wang #1

  那在请问一下老师，关于Promise。想请教一下在vue中的执行更新时机是什么时候。比如说一次同步task中遇到了一个Promise，是等待这个Promise完成后才会进行页面更新。还是仅仅会执行到Promise然后更新一次页面，然后等待Promise完成后在重新在下一次task中更新页面

• ustbhuangyi 回复 提问者 hy_wang #2

  它的更新只会在 nextTick 后执行，和 Promise 无关。