vue 中的watch 的deep属性

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