在 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 属性时应该谨慎,并仅在必要时使用。