vue 组件watch监听器

Vue组件的`watch`选项可以用于监听组件数据的变化并执行相应的操作。下面是一个例子，展示如何在Vue组件中使用`watch`选项：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Initial message'
    };
  },
  methods: {
    changeMessage() {
      this.message = 'New message';
    }
  },
  watch: {
    message(newVal, oldVal) {
      console.log('Message changed:', newVal, oldVal);
      
      // 在这里可以执行一些其他的操作，比如发送网络请求或者更新其它组件的数据
    }
  }
};
</script>

在上面的例子中，组件中有一个`message`属性，当点击按钮改变`message`属性的值时，`watch`选项会捕捉到`message`的变化，并执行相应的操作。在这里，我们只是简单地在控制台打印出新旧值，但你可以根据实际需求来编写自己的逻辑。