vue3和vue2的watch监听

Vue 3和Vue 2的watch监听在使用方式上有一些区别。在Vue 2中，我们可以使用`watch`选项或`$watch`方法来监听数据的变化。而在Vue 3中，`watch`选项已被移除，取而代之的是使用了新的`watch`函数。

在Vue 2中，我们可以在组件的选项中定义`watch`属性，然后通过字符串形式指定要监听的数据，以及对应的回调函数。示例如下：

export default {
  data() {
    return {
      value: ''
    }
  },
  watch: {
    value(newValue, oldValue) {
      // 这里是回调函数
      console.log('value发生变化', newValue, oldValue);
    }
  }
}

在Vue 3中，我们使用`watch`函数来实现类似的功能。示例如下：

import { watch } from 'vue';

export default {
  setup() {
    const value = ref('');

    watch(value, (newValue, oldValue) => {
      // 这里是回调函数
      console.log('value发生变化', newValue, oldValue);
    });

    return {
      value
    };
  }
}

需要注意的是，在Vue 3中，我们需要使用`ref`函数来将响应式数据进行包装。然后，将包装后的数据传递给`watch`函数进行监听。另外，Vue 3还提供了更多的参数选项，用于精确控制监听的行为。

总结来说，Vue 3中使用了新的`watch`函数来替代Vue 2中的`watch`选项，但使用方式上只是稍有差异。