vue中watch监听

在Vue中，watch是一个用于监听数据变化并执行相应操作的选项。它可以用来观察一个特定的数据属性，当该属性发生变化时，执行指定的回调函数。

watch选项可以在Vue组件的选项对象中定义，它接收一个对象作为参数，对象的每个属性都是要监听的数据属性，而属性的值则是一个回调函数，用于处理数据变化时的逻辑。

下面是一个示例：

// Vue组件选项对象
export default {
  data() {
    return {
      message: 'Hello, Vue!',
    };
  },
  watch: {
    message(newValue, oldValue) {
      // 当message属性发生变化时，执行回调函数
      console.log('message属性发生变化');
      console.log('新值：', newValue);
      console.log('旧值：', oldValue);
    },
  },
};

在上面的示例中，我们定义了一个名为message的数据属性，并在watch选项中监听了该属性。当message属性发生变化时，watch会执行回调函数，并将新值和旧值作为参数传递给回调函数。

除了监听单个属性外，我们还可以使用深度监听来观察对象或数组的变化。例如：

watch: {
  obj: {
    handler(newValue, oldValue) {
      // 当obj对象发生变化时，执行回调函数
      console.log('obj对象发生变化');
      console.log('新值：', newValue);
      console.log('旧值：', oldValue);
    },
    deep: true, // 开启深度监听
  },
},

在上面的示例中，我们通过设置`deep: true`来开启对obj对象的深度监听。