Vue 中的监听器watch简介及使用方法

在Vue中，watch是一种可以用来监听某个数据值变化的机制。它可以让开发者在数据发生变化时执行一些逻辑代码，比如更新DOM、发送请求等等。下面是一个简单的Vue组件，演示了如何使用watch监听数据变化：

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

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

在这个组件中，我们使用了一个message变量来表示消息，还有一个按钮，点击按钮后，message的值将会改变。同时，组件还定义了一个watch对象，用来监听message数据的变化。当message数据变化时，会触发watch的回调函数，打印出变化前和变化后的值。

总结一下watch的使用方法：

在Vue组件中定义一个watch对象
watch对象中的每个属性都会被解析为一个监听器
监听器有两个参数，新值和旧值，可以在回调函数中使用
在Vue组件销毁时，需要手动取消watch监听，以避免内存泄露和性能问题。