Vue.js 被动对象未在监视发出的事件上更新

我正在用这个反应对象构建一个复杂的表单

const formData=reactive（{}）
提供（'formData'，formData）

在表单中，其中一个组件的渲染方式如下：

这是ComboZone渲染函数：

设置（道具：任意，{emit}）{
const{t}=useI18n（）
const{getters}=useStore（）
const mucities=getters['registry/mucities']
const_provides=getters['registry/provides']
const_regions=getters['registry/regions']
const citificity=useModelWrapper（道具，发射，'citificity\u p'）
const province=useModelWrapper（道具，发射'province\u p'）
const region=useModelWrapper（道具，发射，'region\u p'）
const updateConnectedField=（键：字符串，集合：ComputedRef）=>{
if（collection.value&&collection.value.length==1）{
console.log（`update:${key}=>${collection.value[0].id}`）
emit（`update:${key}`，collection.value[0].id）
}否则{
log（`update:${key}=>undefined`）
emit（`update:${key}`，未定义）
}
}
常数省份=计算的（（）=>（circipulation.value？\省份[circipulation.value]：[]））
const regions=计算（（）=>（province.value？_regions[province.value]：[]））
监视（市政，（）=>updateConnectedField（'province_p'，provinces））
监视（省，（）=>updateConnectedField（'region_p'，regions））
返回{t，市，省，区，市，省，区}
}

useModelWrapper：

从“vue”导入{computed，WritableComputedRef}
导出默认函数useModelWrapper（props:any，emit:any，name='modelValue'）：WritableComputedRef{
计算收益({
获取：（）=>道具[名称]，
设置：（值）=>{
log（`useModelWrapper update:${name}=>${value}`）
emit（`update:${name}`，value）
}
})
}

---

问题是useModelWrapper发出的事件正确地更新了父模板中的formData，watch函数内发出的事件延迟了一次渲染…

尝试在组件中使用key:prop。我认为它会解决这个问题。

TL；博士 使用

watchEffect

代替

watch

---

…有一点需要注意，我没有尝试重现，我猜您遇到了这个问题，因为您使用的

watch

是惰性运行的。 懒惰的本质是延迟执行的结果，这可能就是为什么您会看到它在下一个周期触发的原因

立即运行函数，同时反应式跟踪其依赖项，并在依赖项发生更改时重新运行

与watchEffect相比，watch允许我们：

• 懒散地执行副作用
• 更具体地说明应该触发观察者重新运行的状态
• 访问监视状态的上一个值和当前值

---

找到了一个解决方案，watchEffect不是办法。

---

看起来是一个问题，在同一个刻度中有多个更新事件，我用

{flush:'post'}

作为watch函数的选项来处理手表的刷新。

您应该在like实用程序中放一个最小的可重复的问题示例。我无法重现您的问题，即它在我的机器上的工作与此轻度相关，

solidjs

framework的作者有一条关于各种框架的更新行为的推特，这里很有趣：嗨，丹尼尔，watchEffect不起作用，我想我找到了使用{flush:'post'}的解决方案在watch函数中，因为在同一个刻度中有多个更新，而且正如您所说的watch是懒惰的