1. 什么是 Vue Watch？
Watch（侦听器）是 Vue 中一个强大的特性，用于响应数据的变化并执行相应的操作。当我们需要在数据变化时执行异步操作或复杂逻辑时，Watch 是最佳选择。
2. 基本语法
2.1 选项式 API
export default {
data() {
return {
message: 'Hello'
}
},
watch: {
message(newValue, oldValue) {
console.log('消息变化了：', newValue, oldValue)
}
}
}
2.2 组合式 API
import { ref, watch } from 'vue'
const message = ref('Hello')
watch(message, (newValue, oldValue) => {
console.log('消息变化了：', newValue, oldValue)
})
3. Watch 的高级特性
3.1 深度侦听
watch: {
user: {
handler(newValue, oldValue) {
console.log('用户信息变化了')
},
deep: true
}
}
3.2 立即执行
watch: {
message: {
handler(newValue, oldValue) {
console.log('消息内容：', newValue)
},
immediate: true
}
}
4. 实践案例
4.1 表单验证
export default {
data() {
return {
email: '',
isValid: false
}
},
watch: {
email(newValue) {
this.isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(newValue)
}
}
}
4.2 搜索防抖
export default {
data() {
return {
searchQuery: ''
}
},
watch: {
searchQuery: {
handler(newValue) {
this.debounceSearch(newValue)
},
debounce: 500
}
},
methods: {
debounceSearch(query) {
// 执行搜索操作
}
}
}
5. Watch vs Computed
- Watch：适用于数据变化时执行异步操作或复杂逻辑
- Computed：适用于依赖其他数据计算得出新值
6. 最佳实践
- 合理使用
immediate和deep选项 - 注意内存泄漏，及时清理不需要的侦听器
- 避免在 watch 回调中直接修改被侦听的值
- 使用
watchEffect处理多个依赖的场景
7. 注意事项
- 深度侦听可能会影响性能
- 避免在 watch 中产生无限循环
- 组件销毁时记得清理副作用
总结
Watch 是 Vue 中处理副作用的重要工具，合理使用可以让我们的代码更加清晰和可维护。在实际开发中，需要根据具体场景选择合适的使用方式，并注意避免常见的陷阱。
