vue深度监听

可以通过$watch方法进行深度监听。以下是深度监听的语法格式：

this.$watch(
  'expression',
  callback(newValue, oldValue),
  { deep: true }
);

其中：

• expression是要监听的属性的表达式，可以是一个字符串或者一个计算属性的函数。
• callback是当属性值发生变化时要执行的回调函数，它接收两个参数：newValue表示新的属性值，oldValue表示旧的属性值。
• { deep: true }表示进行深度监听。

例如，假设有一个对象data，你想要深度监听其中的nestedProperty属性：

// 在Vue组件中
data() {
  return {
    data: {
      nestedProperty: 'initial value'
    }
  };
},
created() {
  this.$watch(
    'data',
    (newValue, oldValue) => {
      console.log('data changed:', newValue.nestedProperty);
    },
    { deep: true }
  );
}

上述代码中，在组件的created生命周期钩子中使用$watch方法进行深度监听。通过指定data作为要监听的属性表达式，以及一个回调函数来处理属性变化。{ deep: true }参数表示进行深度监听。

当data.nestedProperty的值发生变化时，回调函数将被触发，并打印出新的属性值。

通过深度监听，你可以跟踪嵌套对象或数组中属性的变化，而不仅仅是顶层属性的变化。这对于在响应式数据发生改变时执行特定操作非常有用。