vue要实现watch
监听数据变化的基本用法
在Vue中，watch用于监听响应式数据的变化。当数据变化时，执行特定的回调函数。基本语法如下：
export default {
data() {
return {
message: 'Hello'
}
},
watch: {
message(newVal, oldVal) {
console.log(`新值: ${newVal}, 旧值: ${oldVal}`)
}
}
}深度监听对象
当需要监听对象内部属性的变化时，使用deep选项：
watch: {
obj: {
handler(newVal, oldVal) {
console.log('对象变化')
},
deep: true
}
}立即触发监听
使用immediate选项可以在组件创建时立即触发监听：
watch: {
value: {
handler(newVal) {
console.log('立即触发:', newVal)
},
immediate: true
}
}监听数组变化
Vue能自动检测数组的变异方法（如push/pop等）。如需监听数组元素变化：
watch: {
arr: {
handler(newVal) {
console.log('数组变化:', newVal)
},
deep: true
}
}计算属性与watch结合
当需要基于多个数据变化进行计算时，可结合计算属性使用：
computed: {
fullName() {
return this.firstName + ' ' + this.lastName
}
},
watch: {
fullName(newVal) {
console.log('全名变化:', newVal)
}
}监听路由变化
在组件内监听路由参数变化：
watch: {
'$route'(to, from) {
console.log('路由变化', to.path)
}
}使用$watch API
动态添加和移除监听：
export default {
mounted() {
const unwatch = this.$watch('data', (newVal) => {
console.log('动态监听:', newVal)
})
// 调用unwatch()停止监听
}
}性能优化技巧
避免在watch中执行复杂操作，必要时使用debounce：
import _ from 'lodash'
watch: {
searchText: _.debounce(function(newVal) {
this.fetchResults(newVal)
}, 500)
}watch与async/await
在watch中使用异步操作：
watch: {
async userId(newVal) {
const data = await fetchUser(newVal)
this.user = data
}
}组件props监听
监听父组件传递的props变化：
props: ['user'],
watch: {
user(newVal) {
console.log('用户数据更新', newVal)
}
}
