watch 是 Vue 中响应状态变更的副作用触发器，用于父子/跨层级组件间轻量通信；应监听 props 或 computed 值，避免直接修改被监听数据，配合 provide/inject、防抖、取消令牌等确保健壮性。
Vue.js 中的 watch 本身不是为组件通信设计的，但它常被用作响应式状态变更后的“副作用触发器”，在父子、兄弟或跨层级组件间实现轻量级、间接的状态流转控制。关键在于：它不替代 props/emit、provide/inject 或状态管理，而是对已同步到本地的状态变化做出反应。
父子组件中用 watch 响应 props 变更驱动业务逻辑
子组件接收父组件传入的 prop（如 currentStep、formData），通过 watch 监听其变化，执行校验、请求、动画或 UI 切换等操作。
- 推荐使用
watch: { propName: { handler() {}, immediate: true, deep: true } }形式，显式控制触发时机和深度监听 - 避免在
watch中直接修改被监听的 prop，应通过$emit通知父组件更新，保持单向数据流 - 例如：监听
userProfile对象变化后自动调用validateProfile()并更新本地错误提示
用计算属性 + watch 组合解耦“状态派生”与“行为响应”
当多个响应式源共同决定某个业务动作是否触发时，先用 computed 封装判断逻辑，再用 watch 监听该计算属性，让关注点分离更清晰。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 比如：
const canSubmit = computed(() => isValid.value && isDirty.value && !isSubmitting.value) - 然后
watch(canSubmit, (newVal) => { if (newVal) enableSubmitButton() }) - 这样比在 watch 中堆砌多个条件判断更易读、可测试、便于复用
配合事件总线或 provide/inject 实现松耦合跨组件 watch
对于非父子关系但存在明确状态依赖的组件（如弹窗与表单），可通过 provide/inject 共享一个响应式对象，各组件独立 watch 其字段，避免全局事件总线的不可控性。
立即学习“前端免费学习笔记（深入）”；
- 父组件
provide: { sharedState: reactive({ loading: false, activeTab: 'detail' }) } - 任意子组件
inject('sharedState')后watch(() => sharedState.activeTab, handleTabChange) - 状态变更由统一来源（如按钮点击）触发，watch 只负责消费，职责明确
注意异步 watch 的清理与竞态控制
当 watch 触发 API 请求等异步操作时，必须处理前序请求未完成就被新值覆盖的情况，否则导致界面状态错乱或重复提交。
- 使用
AbortController或取消令牌（Vue 3.4+ 支持onInvalidate）中断旧请求 - 对搜索输入类场景，建议加防抖（
lodash.debounce或setTimeout/clearTimeout手动实现） - 避免在 watch 回调中直接修改多个响应式变量，容易引发连锁 watch 触发，必要时用
nextTick或setTimeout延迟执行
