Vue3监听表单数据变化失效问题求助

你遇到的问题是：用watch监听form.value时，只有初始化从接口赋值时触发，手动修改表单输入（修改name/description）时不触发。

问题原因 #

Vue3的watch默认是浅监听：它只会检测被监听目标的引用是否发生变化。当你修改form.value内部的name、description属性时，form.value这个对象的引用并没有改变，所以watch不会触发回调。

解决方案 #

有三种可行的解决方式，根据你的需求选择：

1. 开启深度监听

给watch添加deep: true选项，让它深度遍历对象内部属性的变化：

watch(() => form.value, async (newForm) => {
  console.log('form change', newForm);
}, { deep: true }); // 开启深度监听

2. 精准监听具体属性

如果你只需要监听name和description，可以直接监听这两个属性的 getter，性能更优：

watch(
  [() => form.value.name, () => form.value.description],
  async ([newName, newDesc]) => {
    console.log('form change', { name: newName, description: newDesc });
  }
);

3. 改用reactive定义表单对象

如果表单是复杂对象，也可以用reactive来定义（注意reactive不能直接解构，否则会失去响应式），监听时默认支持深度监听：

// 用reactive替代ref
const form = reactive({
  id:'',
  name: '',
  description: ''
});

// 监听整个form对象
watch(form, async (newForm) => {
  console.log('form change', newForm);
}, { deep: true }); // 若需要深度监听则开启，或者也可以监听具体属性

额外注意 #

你代码里的赋值语句form.value = { ..._.clone(orgStore.currentOrganization) , ...form };存在小问题：...form应该改为...form.value，因为form是ref对象，form.value才是内部的表单对象，避免潜在的响应式异常。

内容的提问来源于stack exchange，提问作者user824624