vue watch的写法

在Vue中使用`watch`功能可以监测数据的变化，并在数据变化时执行相应的操作。以下是Vue中`watch`的写法示例：

export default {
  data() {
    return {
      value: ''
    };
  },
  watch: {
    // 监测 value 数据的变化
    value(newValue, oldValue) {
      // 在 value 变化时执行的操作
      console.log('value 变化了', newValue, oldValue);
    }
  }
}

在上述示例中，我们在Vue组件的`watch`选项中定义了一个属性名为`value`的监测器。当`value`发生变化时，会触发监测器函数，并传入两个参数：新值`newValue`和旧值`oldValue`。你可以在监测器函数中执行你想要的操作，比如打印日志、调用其他方法等。

另外，你还可以通过设置`deep`选项来深度监测对象或数组的变化，以及使用`immediate`选项在组件初始化时立即执行监测器函数。下面是一个带有`deep`和`immediate`选项的示例：

export default {
  data() {
    return {
      obj: {
        prop: ''
      }
    };
  },
  watch: {
    'obj.prop': {
      handler(newValue, oldValue) {
        console.log('obj.prop 变化了', newValue, oldValue);
      },
      deep: true, // 深度监测对象的变化
      immediate: true // 立即执行监测器函数
    }
  }
}

在这个示例中，我们通过字符串形式指定了需要监测的属性路径`'obj.prop'`。设置了`deep: true`后，Vue会递归监测`obj`对象及其子属性的变化。设置了`immediate: true`后，监测器函数会在组件初始化时立即执行一次。

通过上述写法，你可以方便地使用`watch`来监测数据的变化，并在变化时执行相应的操作。