vue watch实现
vue watch 的实现方法
在 Vue 中，watch 用于监听数据变化并执行相应的回调函数。以下是几种常见的实现方式：
基本用法
通过选项式 API 的 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
}
}组合式 API 用法
在 setup() 中使用 watch 函数：
import { ref, watch } from 'vue'
export default {
setup() {
const count = ref(0)
watch(count, (newVal, oldVal) => {
console.log(`count 变化: ${oldVal} -> ${newVal}`)
})
return { count }
}
}监听多个数据源
传入数组同时监听多个值：
watch(
[count, user],
([newCount, newUser], [oldCount, oldUser]) => {
console.log('多个值发生变化')
}
)停止监听
调用 watch 返回的函数可停止监听：
const stop = watch(count, callback)
stop() // 停止监听这些方法覆盖了 Vue 2 和 Vue 3 中 watch 的主要使用场景，可以根据具体需求选择适合的实现方式。
