vue的watch如何实现
vue的watch实现方法
在Vue中，watch用于监听数据变化并执行相应操作。以下是几种常见实现方式：
基础监听方式
通过选项式API的watch属性监听数据变化：
export default {
data() {
return {
message: 'Hello'
}
},
watch: {
message(newVal, oldVal) {
console.log(`值从${oldVal}变为${newVal}`)
}
}
}立即执行监听
添加immediate选项使回调在监听开始时立即执行：
watch: {
message: {
handler(newVal, oldVal) {
// 处理逻辑
},
immediate: true
}
}深度监听对象
使用deep选项监听对象内部值变化：
watch: {
user: {
handler(newVal) {
// 对象任何属性变化都会触发
},
deep: true
}
}计算属性监听
结合计算属性实现特定监听：
computed: {
userName() {
return this.user.name
}
},
watch: {
userName(newVal) {
// 仅监听name变化
}
}组合式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([ref1, ref2], ([newVal1, newVal2], [oldVal1, oldVal2]) => {
// 处理多个值变化
})停止监听
通过watch函数返回的停止函数来取消监听：
const stop = watch(source, callback)
// 需要时调用
stop()监听路由变化
监听路由参数变化：
watch: {
'$route.params.id'(newId) {
// 处理路由参数变化
}
}这些方法覆盖了Vue中watch的主要使用场景，可以根据具体需求选择合适的方式。对于复杂场景，可能需要结合计算属性和方法调用实现更精细的控制。
