
vue2 中如何使用watch监测一个 传入的props值
在 Vue 2 中,你可以使用 watch 选项来监听传入的 props 变化。当一个 prop 的值发生变化时,Vue 会触发相应的 watcher 回调函数。
以下是如何在一个组件中设置 watch 来监听 props 的基本示例:
// 子组件
exportdefault {
props: ['myProp'], // 接收父组件传递的 prop
watch: {
// 创建一个 watcher 来监听 myProp 的变化
myProp(newValue, oldValue) {
// 这里可以写当 myProp 改变时需要执行的逻辑
console.log('myProp changed from', oldValue, 'to', newValue);
}
},
// 其他选项...
}如果你想要在 myProp 初始赋值的时候也触发这个 watcher(默认情况下,watcher 不会在初始赋值时触发),你可以为 watcher 提供一个立即执行的选项:
watch: {
myProp: {
immediate: true, // 立即以当前值触发回调
handler(newValue, oldValue) {
console.log('myProp changed from', oldValue, 'to', newValue);
}
}
}需要注意的是,在某些情况下,如果你监听的对象是复杂类型(例如对象或数组),你可能需要深度监听这些属性的变化。这可以通过将 deep 选项设置为 true 来实现:
watch: {
myProp: {
handler(newValue, oldValue) {
console.log('myProp deeply changed from', oldValue, 'to', newValue);
},
deep: true // 深度监听对象或数组的变化
}
}请根据你的实际需求调整上述代码。









