求助一个Vue的前端问题

记笔记的账号

已于 2024-08-01 17:02:59 修改

阅读量221

点赞数 7

文章标签： vue.js 前端 javascript

于 2024-08-01 17:01:32 首次发布

本文链接：https://blog.csdn.net/deerperson/article/details/140852256

版权

<template>
    <div ref="divDom">
        {{ data }}
    </div>
    <button @click="func">changeData</button>
</template>

<script setup>
import { nextTick, ref } from 'vue';
const divDom = ref(null)
const data = ref(0)

const func = () => {
    data.value = 10
    nextTick(() => {
        console.log('afterNextTick', divDom.value.innerText)
    })
    Promise.resolve().then(() => {
        console.log('afterPromise', divDom.value.innerText)
    })
}
</script>

点击changeData按钮后输出结果，以下有几个问题：

1：以上代码的执行顺序为何是：
afterPromise 10
afterNextTick 10

而不是：

afterNextTick 10
afterPromise 10

2：Vue的dom更新是宏任务，Promise.resolve().then()是微任务，微任务比宏任务先执行，那为什么Promise.resolve().then()还能拿到最新的DOM？