vue3实现watch

在 Vue 3 中，watch 的实现方式有所变化。以下是使用 Vue 3 实现 watch 的步骤：

1. 在 Vue 组件中，使用 `watch` 函数来创建一个 watcher。该函数接受两个参数：监听的表达式和回调函数。

   import { watch } from 'vue';

   export default {
     setup() {
       watch(expression, callback);
     }
   }

2. 在回调函数中，你可以根据需要执行相应的逻辑。回调函数接收两个参数：新值和旧值。

   watch(expression, (newValue, oldValue) => {
     // 执行相应的逻辑
   });

3. 表达式可以是一个响应式数据（如 `ref` 或 `reactive` 对象）或一个计算属性。

   const count = ref(0);

   watch(count, (newValue, oldValue) => {
     // 监听 count 值的变化
   });

   // 或者监听计算属性
   const doubledCount = computed(() => count.value * 2);

   watch(doubledCount, (newValue, oldValue) => {
     // 监听 doubledCount 值的变化
   });

4. 如果你只想监听特定的属性变化，可以使用字符串形式的表达式。

   const state = reactive({
     name: 'John',
     age: 25
   });

   watch('state.name', (newValue, oldValue) => {
     // 监听 state.name 值的变化
   });

这就是在 Vue 3 中实现 watch 的基本步骤。请注意，Vue 3 的 `watch` 函数返回一个 `stop` 函数，你可以在不需要监听时调用它来停止监听。