监听器在Vue中使用的代码示例

在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(`Message changed from "${oldVal}" to "${newVal}"`)
    }
  },
  methods: {
    changeMessage() {
      this.message = 'New message'
    }
  }
}
</script>

上面的代码中，我们定义了一个`message`数据属性，同时在`watch`中定义了一个监听器来监听`message`的变化。当`message`的值发生变化时，监听器中定义的回调函数就会被触发，我们在这个回调函数中打印出了变化前后的值。

我们还定义了一个`changeMessage`方法，当我们点击按钮时，会调用这个方法来改变`message`的值，从而触发监听器。