vue3中watch详解

在 Vue 3 中，watch 是一个用于观察和响应 Vue 组件中响应式数据变化的选项或函数。当被观察的数据发生变化时，watch 可以执行一些副作用或回调操作，比如发送请求、更新 DOM 之外的状态或执行其他逻辑。

使用方法

在 Vue 3 的组件选项中，你可以通过 watch 选项来定义观察者：

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watch(count, (newVal, oldVal) => {
      console.log(`Count changed from ${oldVal} to ${newVal}`);
    });

    return {
      count
    };
  }
}

在上面的例子中，我们创建了一个响应式引用 count，并使用 watch 函数来观察它的变化。当 count 的值改变时，回调函数会被触发，并打印出旧值和新值。

特性

1. 响应式：watch 能够观察响应式数据的变化，并在数据改变时执行相应的回调。

2. 深度观察：默认情况下，watch 是浅观察的，即它只能检测到引用类型数据的第一层属性的变化。如果需要深度观察对象或数组内部的嵌套属性变化，可以传递 deep: true 选项。

3. 立即执行：默认情况下，watch 是在数据第一次变化时执行的。如果需要在组件创建时立即执行回调，可以传递 immediate: true 选项。

4. 停止观察：watch 函数返回一个停止观察的函数，你可以调用它来停止观察响应式数据的变化。

在 Composition API 中使用

在 Vue 3 的 Composition API 中，watch 是一个独立的函数，可以直接在 setup 函数中使用：

import { ref, watch, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);

    onMounted(() => {
      watch(count, (newVal, oldVal) => {
        console.log(`Count changed from ${oldVal} to ${newVal}`);
      });
      
      // 或者观察多个源
      watch([count, doubleCount], ([newCount, newDoubleCount], [oldCount, oldDoubleCount]) => {
        console.log(`Count changed from ${oldCount} to ${newCount}`);
        console.log(`Double count changed from ${oldDoubleCount} to ${newDoubleCount}`);
      });
    });

    return {
      count,
      doubleCount
    };
  }
}

在上面的例子中，我们使用了 onMounted 生命周期钩子来确保在组件挂载后才开始观察 count。我们还展示了如何同时观察多个响应式源。

停止观察

如果需要手动停止观察，你可以将 watch 函数的返回值保存到一个变量中，并在适当的时候调用它：

const stopWatch = watch(count, (newVal, oldVal) => {
  // ...
});

// 停止观察
stopWatch();

总结

Vue 3 中的 watch 提供了一种灵活的方式来观察和响应组件中响应式数据的变化。你可以使用它来执行副作用操作、发送请求或更新非响应式状态。在 Composition API 中，watch 函数与 setup 函数一起使用，使得观察响应式数据变得更加直观和模块化。