vue 3 的 watch 不监听自定义事件，只响应响应式数据变化；需先在事件回调中更新 ref/reactive 数据，再用 watch 监听该数据，或通过 getter 监听 props，watcheffect 则适合多状态联动场景。
Vue 3 的 watch 本身不监听“自定义事件”，它只响应响应式数据的变化。所谓“监听自定义事件触发数据刷新”，本质是：先在事件回调中更新响应式数据，再用 watch 监听该数据——事件只是触发更新的入口，watch 负责响应更新后的状态。
监听由自定义事件驱动的数据变化
比如子组件通过 $emit('update:search') 通知父组件搜索关键词变更，父组件需用 ref 或 reactive 接收并暴露给 watch：
- 在父组件中定义响应式变量（如
searchKey = ref('')） - 子组件 emit 后，父组件在事件处理函数里赋值：
searchKey.value = newKey - 对
searchKey使用watch，即可捕获每次 emit 引发的值变更
监听 props 中由父级传入的事件参数
若自定义事件来自父组件（如通过 v-model、@update:xxx），而子组件需响应其变化，可监听对应的 prop：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 假设父组件传入
modelValue并绑定@update:modelValue - 子组件中不能直接 watch
props.modelValue（会丢失响应式），应写成 getter 函数：watch(() => props.modelValue, (v) => {...}) - 这样即使父组件通过事件修改了 modelValue，watch 也能立即响应
配合 watchEffect 实现更简洁的事件联动
当多个响应式状态共同影响某项行为（如搜索 + 分页 + 筛选），且都可能由不同事件触发时，watchEffect 更合适：
- 它自动追踪内部使用的响应式变量，无需手动指定监听源
- 只要
searchKey、pageNo、filterStatus中任一变化，都会重新执行请求逻辑 - 代码更少，不易漏监听，适合“事件驱动+多状态聚合”的刷新场景
避免常见误区
不要试图让 watch 直接监听 $emit、EventBus 或 mitt 实例上的事件；这些不是响应式数据源，watch 无法识别。正确路径始终是：
- 事件 → 更新 ref / reactive 数据 → watch 捕获变化 → 执行副作用（请求、校验、动画等）
- 如果事件不改变任何响应式状态，watch 就不会运行——这是设计使然，不是 bug
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
