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 // 深度监听对象或数组的变化 } }
请根据你的实际需求调整上述代码。