vue watch实现
在 Vue 中实现 watch 监听数据变化
Vue 的 watch 选项用于监听数据变化并执行相应的回调函数。以下是几种常见的实现方式：
基础用法
export default {
data() {
return {
message: 'Hello'
}
},
watch: {
message(newVal, oldVal) {
console.log('message changed:', oldVal, '->', newVal)
}
}
}深度监听对象
当需要监听对象内部属性变化时，使用 deep 选项：
watch: {
user: {
handler(newVal, oldVal) {
console.log('user changed')
},
deep: true
}
}立即触发回调
如果需要立即执行一次监听回调，使用 immediate 选项：
watch: {
value: {
handler(newVal, oldVal) {
console.log('value changed')
},
immediate: true
}
}监听特定路径
使用字符串路径监听嵌套属性：
watch: {
'user.name'(newVal, oldVal) {
console.log('user name changed')
}
}使用 $watch API
在组件实例中动态添加监听器：
created() {
this.$watch(
'count',
(newVal, oldVal) => {
console.log('count changed')
},
{ immediate: true }
)
}组合式 API 中的 watch
在 setup() 中使用 watch：
import { ref, watch } from 'vue'
export default {
setup() {
const count = ref(0)
watch(count, (newVal, oldVal) => {
console.log('count changed')
})
return { count }
}
}监听多个数据源
监听多个响应式数据：
watch(
[ref1, ref2],
([newVal1, newVal2], [oldVal1, oldVal2]) => {
console.log('multiple values changed')
}
)停止监听
通过调用 watch 返回的函数停止监听：
const stopWatch = watch(data, callback)
// 需要停止时调用
stopWatch()
