vue实现watch
在 Vue 中实现 watch 的方法
Vue 的 watch 用于监听数据变化并执行相应的回调函数。以下是几种常见的实现方式：
基本用法
通过选项式 API 的 watch 属性监听数据变化：
export default {
data() {
return {
message: 'Hello'
}
},
watch: {
message(newVal, oldVal) {
console.log('消息变化:', oldVal, '->', newVal)
}
}
}监听对象属性
使用点语法或字符串路径监听嵌套属性：
watch: {
'user.name'(newVal) {
console.log('用户名变化:', newVal)
}
}深度监听
添加 deep: true 监听对象内部所有属性变化：
watch: {
user: {
handler(newVal) {
console.log('用户对象变化:', newVal)
},
deep: true
}
}立即触发
设置 immediate: true 使回调在监听开始时立即执行：
watch: {
value: {
handler(newVal) {
console.log('初始值:', newVal)
},
immediate: true
}
}组合式 API 用法
在 setup() 中使用 watch 函数：
import { ref, watch } from 'vue'
export default {
setup() {
const count = ref(0)
watch(count, (newVal, oldVal) => {
console.log('计数变化:', oldVal, '->', newVal)
})
return { count }
}
}监听多个源
传入数组同时监听多个响应式数据：
watch([foo, bar], ([newFoo, newBar], [oldFoo, oldBar]) => {
console.log('foo或bar变化:', newFoo, newBar)
})停止监听
watch 返回停止函数，可在需要时取消监听：
const stop = watch(source, callback)
// 调用停止函数
stop()注意事项
- 避免在监听器中修改被监听的数据，可能导致无限循环
- 深度监听对性能影响较大，应仅在必要时使用
- 对于复杂逻辑，考虑使用计算属性替代监听器
