vue3 watch怎么用

在Vue 3中，要使用watch可以通过两种方式来实现。

第一种方式是使用setup()函数，这是在Vue 3中引入的新特性。在setup()函数中，你可以使用watch()函数来创建一个响应式的监听器。例如，你可以在组件中这样使用watch：

import { watch } from 'vue';

export default {
  setup() {
    watch(
      // 监听的数据
      () => state.value,
      // 当数据变化时触发的回调函数
      (newValue, oldValue) => {
        // 处理逻辑
      }
    );
  }
}

在上面的例子中，我们监听了`state.value`这个响应式数据的变化，并在数据发生变化时执行回调函数。

第二种方式是在组件的options中使用watch属性。这种方式与Vue 2.x中的用法类似。你可以在组件的options中添加一个watch对象，然后在其中定义需要监听的数据和相应的回调函数。例如：

export default {
  data() {
    return {
      value: ''
    };
  },
  watch: {
    value(newValue, oldValue) {
      // 处理逻辑
    }
  }
}

在上面的例子中，我们监听了`value`这个数据的变化，并在数据发生变化时执行回调函数。

总结一下，Vue 3中使用watch的两种方式分别是通过setup()函数和在组件的options中定义watch属性。根据不同的需求和使用场景选择合适的方式来使用。