问题描述
页面中引入了一个a-drawer抽屉,抽屉中有表单a-form,a-form绑定了数据formState,其值由父页面通过:formData传递进来,在抽屉中监听formState的变化,如果变动则重新计算formState的总和。以上需求在第一次抽屉打开时,无法监听到formState的变化
环境
vue3、ant-design-vue V3.1.0-rc.5
原因猜想
父级页面初始化后,其中引入的子组件也一同初始化,当通过按钮点击打开子组件(a-drawer),此时监听动作在数据初始化之后,watch监听不到组件中的formState数据。
解决办法
尝试将watch放入vue生命周期钩子函数中,onMounted中无效
最终将watch代码放入onUpdated,问题解决
onUpdated(() => {
// 监听formState.value的变化,动态计算数据
watch(formState, (newVal, oldVal) => {
...
}, { deep: true })
})
以上内容若有误,请各位指出,避免误导更多人。