vue3侦听器watch的用法

Vue 3中在组件内使用侦听器（watcher）的用法与Vue 2有些不同。在Vue 3中，你可以使用`watch`选项来定义侦听器，也可以在`setup`函数内使用`watch`函数来创建侦听器。下面是两种方式的使用示例。

1. 使用`watch`选项定义侦听器：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { watch } from 'vue';

export default {
  data() {
    return {
      count: 0
    };
  },
  watch: {
    count(newValue, oldValue) {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

2. 在`setup`函数内使用`watch`函数创建侦听器：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

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

    watch(() => count.value, (newValue, oldValue) => {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    });

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

    return { count, increment };
  }
};
</script>

以上是Vue 3中使用侦听器的两种方式。你可以根据具体需求选择合适的方式来创建侦听器。