Vue3使用v-model:prop绑定数据时watch监听不到变化如何解决

问题修复方案 #

1. 优先排查父组件响应式变量定义方式 #

如果你的父组件filters是用reactive声明的，会出现该问题：reactive创建的响应式对象无法被整体赋值，v-model尝试替换整个filters对象时会丢失响应式，自然无法触发watch。

修复方法：将filters改为ref定义

// 错误写法
const filters = reactive({
  // 你的筛选字段
})

// 正确写法
const filters = ref({
  // 你的筛选字段
})

2. 补充watch深度监听配置 #

如果你的filters是嵌套结构，或者后续会有局部修改属性的场景，默认的浅监听无法触发，需要添加deep配置：

watch(filters, (value) => {
  getAccounts(value);
}, { deep: true })

如果是ref定义的filters，注意watch直接传filters本身，不要传filters.value。

3. 手动绑定事件的取值修正 #

你尝试的v-on:update:filters="getAccounts(filters)"写法错误，这里的filters是父组件当前渲染周期的旧值，要获取子组件emit的新值需要使用$event：

<FiltersComponent @update:filters="getAccounts($event)" />

额外排查点 #

确保子组件没有直接修改props.filters的属性值，所有修改都走emit('update:filters')的方式，避免破坏单向数据流导致响应式异常。

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