Vue Options API 的 watch 可监听 data 属性并执行异步操作，需规范写法：单属性监听用函数回调内包裹 async；嵌套属性用字符串路径如 'user.name'；深度监听配合 immediate 和 deep；须手动清理定时器或 AbortController 防内存泄漏。
Vue Options API 中的 watch 选项可以直接监听 data 中定义的响应式属性，并在变化时执行异步操作（比如发请求、防抖、跳转等），关键在于写法规范和避免常见陷阱。
基础写法：监听单个属性并处理异步逻辑
直接在 watch 对象中定义属性名，回调函数接收新值和旧值。注意：不能直接 async 函数作为 handler，需在内部用 async 匿名函数包裹：
- 错误写法：
message: async (newVal) => { await api.search(newVal); }（Options API 不支持 async handler） - 正确写法：在回调内手动启动异步流程，并建议加空值或条件判断防止无效请求
示例：
export default {
data() {
return {
searchQuery: ''
}
},
watch: {
searchQuery(newVal, oldVal) {
if (!newVal.trim()) return
// 防抖可在此处加 setTimeout + clearTimeout 控制
clearTimeout(this.searchTimer)
this.searchTimer = setTimeout(async () => {
try {
const res = await fetch(`/api/search?q=${encodeURIComponent(newVal)}`)
this.results = await res.json()
} catch (err) {
console.error('搜索失败', err)
}
}, 300)
}
},
// 别忘了在 data 中声明 timer 变量
data() {
return {
searchQuery: '',
results: [],
searchTimer: null
}
}
}
监听嵌套对象属性（如 user.name）
当需要监听对象内部字段而非整个对象引用时，用字符串路径语法最简洁：
立即学习“前端免费学习笔记（深入）”；
-
'user.name'：自动解析路径，触发时只关心该字段变化 - 无需
deep: true，性能更优；适合监听表单字段、用户输入等明确路径 - 回调仍接收
newVal和oldVal，类型为字符串/基本值
示例：
data() {
return {
user: { name: '', email: '' }
}
},
watch: {
'user.name'(newName, oldName) {
if (newName && newName.length > 2) {
this.validateName(newName)
}
}
}
立即执行 + 深度监听组合场景
初始化时就要校验或拉取数据，且目标是 reactive 对象深层变化（如数组项更新、对象多层修改），需同时配置 handler、immediate 和 deep：
-
immediate: true：组件创建后立刻执行一次 handler -
deep: true：监听对象任意嵌套属性变更（仅对对象/数组有效） - 注意：
deep有性能开销，仅在必要时开启
示例：
data() {
return {
filters: { status: 'active', tags: ['vue'] }
}
},
watch: {
filters: {
handler(newFilters) {
this.fetchList(newFilters) // 异步请求
},
immediate: true,
deep: true
}
}
清理副作用：避免内存泄漏和竞态
Options API 中 watch 本身不提供自动清理机制，需手动管理：
- 定时器：在新 watch 触发前
clearTimeout/clearInterval - AJAX 请求：使用
AbortController或标记位中断上一次请求 - 组件销毁时清理：在
beforeDestroy（Vue 2）或unmounted（Vue 3 Options）中清除残留资源
示例（带 AbortController 的请求中断）：
data() {
return {
controller: null
}
},
watch: {
searchQuery(newVal) {
if (this.controller) this.controller.abort()
this.controller = new AbortController()
fetch(`/api?q=${newVal}`, { signal: this.controller.signal })
.then(res => res.json())
.then(data => this.list = data)
.catch(err => {
if (err.name !== 'AbortError') console.error(err)
})
}
},
beforeDestroy() {
if (this.controller) this.controller.abort()
}
