Options API 中 watch 不能直接使用 async handler，需在回调内手动启动异步流程，并注意防抖、竞态控制、清理和错误处理；监听嵌套属性可用字符串路径或对象式写法配合 deep；支持 immediate 和 deep 配置以满足初始化执行和深度监听需求。
Options API 中的 watch 选项可以监听 data 返回的响应式属性，并在变化时执行异步操作（如发请求、防抖、跳转等），但不能直接把 handler 写成 async 函数。关键在于回调内部手动启动异步流程，并注意清理、条件判断和错误处理。
基础写法：监听单个属性并包裹异步逻辑
watch 的每个属性名对应一个函数，该函数接收 newVal 和 oldVal。若需异步操作，须在函数体内用 async () => {...} 或 setTimeout + fetch 等方式组织：
- 不能写成
message: async (val) => { ... }—— Vue 不支持 async handler - 应写成
message(newVal, oldVal) { if (newVal) { setTimeout(async () => { ... }, 0) } } - 建议加空值校验或防抖控制，避免无效请求或频繁触发
监听嵌套属性：用字符串路径或对象式写法
当要监听 user.name 这类深层字段时，有两种规范方式：
- 字符串路径写法：
'user.name'(newVal, oldVal) { ... }，适用于简单嵌套，无需deep: true - 对象式写法（更可控）：
user: { handler(newVal, oldVal) { ... }, deep: true }，适合监听整个对象任意内部变化 - 注意：若只写
user(newVal, oldVal)（无 deep），仅当user引用被替换时才触发
执行异步操作时的常见保障措施
异步副作用容易引发内存泄漏或竞态问题，需主动管理：
- 防抖场景：用
clearTimeout(this.timer)清理上一次定时器，再赋新值 - 请求竞态：用
AbortController中断前序请求，尤其在搜索输入频繁变更时 - 组件卸载前清理：在
beforeUnmount钩子中清除定时器或 abort controller - 错误处理：用
try/catch包裹await操作，避免未捕获异常中断流程
需要立即执行或深度监听时的配置
某些场景下需扩展默认行为：
-
immediate: true：让 handler 在组件初始化时立刻执行一次，适合首次加载数据 -
deep: true：配合handler字段使用，确保对象/数组内部变化也能被捕获 - 组合使用示例：
user: { handler() { ... }, deep: true, immediate: true }
