vue3中怎么写一个监听事件监视某个东西的改变

在Vue3中，你可以使用`watch`函数来监听一个数据的变化。`watch`函数接收两个参数：要监听的数据和回调函数。当被监听的数据发生变化时，回调函数就会被调用。

以下是一个简单的示例，演示如何使用`watch`监听一个计数器变量的变化：

<template>
  <div>
    <p>计数器: {{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
import { reactive, watch } from "vue";

export default {
  setup() {
    const state = reactive({
      count: 0,
    });

    function increment() {
      state.count++;
    }

    watch(() => state.count, (newValue, oldValue) => {
      console.log(`计数器值从 ${oldValue} 变为 ${newValue}`);
    });

    return {
      count: state.count,
      increment,
    };
  },
};
</script>

在上面的代码中，我们使用了Vue3的`reactive`函数来创建了一个响应式对象`state`，其中包含了一个名为`count`的计数器变量。当点击按钮时，`increment`函数会将计数器加1。我们在`setup`函数中使用`watch`函数来监听`state.count`的变化，当计数器变化时，回调函数就会被调用，输出计数器的旧值和新值。

需要注意的是，在Vue3中，`watch`函数是在`setup`函数中调用的，而不是在组件的选项中定义的。这是因为Vue3使用了Composition API，将组件的逻辑拆分成了更小的函数，使得代码更加模块化和可复用。