vue监听中的watch监听(详解)

1、watch 选项用于监听数据的变化并执行相应的回调函数。watch 选项提供了两个重要的属性：deep 和 immediate。
1.1、深度监听 (deep: true)
当你需要监听一个对象或数组内部的变化时，可以使用 deep: true。
这会使得 watch 监听器递归地监听对象或数组内部的所有嵌套属性的变化。
//示例：

watch: {
   myObject: {
      handler(newVal, oldVal) {
        console.log('myObject changed:', newVal, oldVal);
      },
      deep: true
      }
 }

1.2、立即执行 (immediate: true):
当你希望在监听器创建时立即执行一次回调函数，可以使用 immediate: true。
这在需要在组件初始化时执行某些操作时非常有用。
//示例：
 

 watch: {
   myValue: {
      handler(newVal, oldVal) {
        console.log('myValue changed:', newVal, oldVal);
      },
      immediate: true
   }
}

1.3、组合使用 (deep: true 和 immediate: true):
你也可以将这两个属性组合使用，以实现深度监听并在监听器创建时立即执行回调函数。
示例：

 watch: {
   myObject: {
      handler(newVal, oldVal) {
        console.log('myObject changed:', newVal, oldVal);
      },
      deep: true,
      immediate: true
   }
}