vue中如何使用watch

Vue中可以使用watch来监测数据的变化，并在数据变化时执行一些操作。下面是一个简单的例子：

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

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    };
  },
  watch: {
    message(newVal, oldVal) {
      console.log(`The message has changed from ${oldVal} to ${newVal}.`);
    }
  },
  methods: {
    changeMessage() {
      this.message = 'New Message!';
    }
  }
};
</script>

在上面的例子中，我们使用了watch来监测message变量的变化。当message变量发生变化时，watch会执行相应的操作。在这个例子中，我们只是简单地打印出message变量的旧值和新值。当我们点击按钮时，message变量的值会变为"New Message!"，这时watch就会执行相应的操作。

除了简单的打印信息，watch还可以执行一些复杂的操作，例如发送请求、更新视图等。Vue的watch功能非常强大，可以帮助我们更好地控制数据的变化