vue的watch如何实现
Vue 中 watch 的实现方法
在 Vue 中，watch 用于监听数据变化并执行相应的回调函数。可以通过多种方式实现监听功能，以下是常见的使用方法。
基本用法
通过 watch 选项在组件中声明监听器：
export default {
data() {
return {
count: 0
}
},
watch: {
count(newVal, oldVal) {
console.log(`count 从 ${oldVal} 变为 ${newVal}`)
}
}
}监听对象属性
使用点语法或字符串路径监听对象的嵌套属性：
watch: {
'user.name'(newVal) {
console.log(`用户名变为: ${newVal}`)
}
}深度监听
添加 deep: true 选项可深度监听对象内部变化：
watch: {
user: {
handler(newVal) {
console.log('用户信息变化', newVal)
},
deep: true
}
}立即触发
设置 immediate: true 可使回调在监听开始时立即执行：
watch: {
count: {
handler(newVal) {
console.log(`初始值为: ${newVal}`)
},
immediate: true
}
}动态监听
使用 $watch API 实现动态监听和取消监听：
export default {
created() {
this.unwatch = this.$watch('count', (newVal) => {
console.log(`动态监听: ${newVal}`)
})
},
beforeDestroy() {
this.unwatch() // 取消监听
}
}监听多个数据源
传入数组可同时监听多个数据源：
watch: {
['count', 'total'](newVals) {
console.log(`count: ${newVals[0]}, total: ${newVals[1]}`)
}
}使用计算属性监听
通过计算属性配合 watch 实现更复杂的监听逻辑：
computed: {
userInfo() {
return `${this.user.name}-${this.user.age}`
}
},
watch: {
userInfo(newVal) {
console.log(`用户信息组合值变化: ${newVal}`)
}
}异步监听
在回调中执行异步操作时，建议配合防抖处理：
import { debounce } from 'lodash'
watch: {
searchQuery: debounce(function(newVal) {
this.fetchResults(newVal)
}, 500)
}注意事项
- 深度监听会对性能产生影响，应谨慎使用
- 监听数组变化时，某些数组方法可能不会触发回调
- 对于复杂数据结构，考虑使用 Vuex 或 Pinia 进行状态管理
- 在组合式 API 中可使用
watch和watchEffect函数实现类似功能
