Vue3 Options API下v-model绑定值变化无法触发监听问题咨询

1. 修复watch监听不生效问题 #

默认Options API的watch监听对象为浅监听，仅当对象整体引用变化时才触发，内部属性变更不会触发，需要开启深度监听：

watch: {
  fieldData: {
    handler(newVal, oldVal) {
      console.log(newVal, oldVal)
      // 在此处调用update方法即可
    },
    deep: true, // 开启深度监听
    immediate: false // 若需要初始化时立即执行一次可改为true
  }
}

如果不需要监听整个fieldData对象的所有属性变更，也可以单独监听指定的动态属性，避免不必要的性能损耗：

watch: {
  'fieldData.目标属性名'(newVal) {
    this.update('目标属性名', newVal)
  }
}

2. 修复事件绑定不触发问题 #

原有@change事件仅在输入框失去焦点、按下回车时才会触发，如果你需要输入过程中实时触发回调，替换为@input事件即可：

<input 
  type="text" 
  class="form-control form-control-solid" 
  placeholder="" 
  v-model="fieldData[field.field]" 
  @input="update(field.field, fieldData[field.field])"
>

3. 兜底可控方案：拆分v-model手动绑定 #

如果前面的方案仍然不生效，大概率是fieldData[field.field]存在响应式丢失问题，你可以直接拆分v-model的语法糖，手动绑定值和输入事件，完全绕开响应式依赖问题：

<input 
  type="text" 
  class="form-control form-control-solid" 
  placeholder="" 
  :value="fieldData[field.field]" 
  @input="update(field.field, $event.target.value)"
>

这种写法不需要依赖v-model的双向绑定更新，每次输入都会直接触发update方法，稳定性更高。

常见问题排查 #

• 确认field.field的取值正确，避免key值错误导致关联的属性不存在
• 如果fieldData[field.field]是后续动态添加的属性，初始化时没有在fieldData中声明，需要使用this.$set(this.fieldData, fieldKey, 初始值)的方式添加属性，保证响应式生效。

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