在写代码的时候,我使用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博客