javaScript：宏任务与微任务的运行顺序

在写代码的时候，我使用Element组件中的表单重置方法，和vue中子传父方法

这里我想要通过 async 和 await 的特点【await 下一行代码作为微任务执行】来规定代码的执行顺序【让重置方法 滞后 于数据传递 执行】

// 确定按钮 子组件
async clickYES() {
    await this.$emit('clickYES', this.form)
    this.$refs.form.resetFields()
},

// 父组件
<formStaff ref="staff" @clickYES="clickYES" />

async clickYES(form) {
      // 点击确定
   if (form.id) {
      //封装的接口
      await putstaffAPI(this.form)
      this.$message.success('修改成功！')
   } else {
      await addstaffAPI(this.form)

      this.$message.success('添加成功！')
   }
 },

出现问题：当我触发clickYES事件的时候传递出来的表单数据都是空的

这里我想到的是微任务的执行顺序还是太过于靠前，在我将数据传递出来之前就将表单数据重置了

解决办法：这里我想到的就是 既然微任务 不行 就将他强行改造成宏任务【更加滞后的执行】

clickYES() {
  this.$emit('clickYES', this.form)
  setTimeout(() => {
    this.$refs.form.resetFields()
  }, 0)
},

【将表单重置 套在定时器里面 这样就将他放在了宏任务中】

此时代码的运行结果就达到了我的预期：表单重置滞后数据导出

那为什么会出现 微任务无法完全滞后 的问题呢？

简单的来说，微任务和宏任务皆为异步任务，但是微任务的优先级高于宏任务

在事件循环中，开始循环宏任务的时候，他会优先循环微任务在开始循环宏任务

参考资料：(1条消息) JavaScript：事件循环机制-宏任务微任务_axios是宏任务_Neeky Zeng的博客-CSDN博客