在 Vue 中,watch
是一个用于观察和响应 Vue 实例上的数据变化的选项。当你在一个属性上设置 watch
时,Vue 会监视该属性的变化并在变化时执行相应的回调函数。
deep
属性是 watch
选项的一个属性,用于深度观察一个对象的变化。默认情况下,watch
只观察一个对象的基本属性的变化。但是,如果你需要观察对象内部属性的变化,就需要使用 deep
属性。
在项目中,我们可以通过组件的传参来判断组件所操作的事件,通过watch来进行传参的数据内容的监听,比如0-1 1-0 来进行判断
下面是一个使用 watch
和 deep
属性的示例:
new Vue({ data: { obj: { prop1: 'value1', prop2: 'value2' } }, watch: { obj: { handler(newVal, oldVal) { console.log('obj 发生变化:', newVal, oldVal); }, deep: true // 深度观察 obj 的变化 } }
});
在上面的示例中,我们观察 obj
对象的变化。由于设置了 deep: true
,所以当 obj
对象的内部属性(如 prop1
和 prop2
)发生变化时,也会触发回调函数。
需要注意的是,深度观察对象会导致性能下降,因为每次对象发生变化时都需要递归遍历对象的所有属性。因此,在使用 deep
属性时应该谨慎,并仅在必要时使用。