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

你可能感兴趣的:(vue.js,javascript,前端)