vue,watch的配置

Vue中的watch选项可以用于监视数据的变化并执行相应的操作。它可以监听一个或多个属性，并在属性值发生变化时触发回调函数。

在组件的选项中，可以使用watch选项进行配置。例如：

export default {
  data() {
    return {
      message: '',
    };
  },
  watch: {
    message(newVal, oldVal) {
      // 当message的值发生变化时，执行回调函数
      console.log('新值:', newVal);
      console.log('旧值:', oldVal);
    },
  },
};

在上面的例子中，watch选项监听了`message`属性的变化。当`message`的值发生改变时，会调用回调函数，并且将新值和旧值作为参数传递给回调函数。

除了简单的监听属性变化外，watch还可以使用深度监听、立即执行回调函数、监听数组变化等功能。下面是一些常见的watch选项的配置示例：

export default {
  data() {
    return {
      message: '',
      list: [],
    };
  },
  watch: {
    // 深度监听message属性
    message: {
      deep: true,
      handler(newVal, oldVal) {
        console.log('新值:', newVal);
        console.log('旧值:', oldVal);
      },
    },
    // 监听list数组变化
    list: {
      handler(newVal, oldVal) {
        console.log('新数组:', newVal);
        console.log('旧数组:', oldVal);
      },
      // 立即执行回调函数
      immediate: true,
    },
  },
};

通过配置watch选项，我们可以更加灵活地响应数据的变化，进行相应的逻辑处理。