Vue 3 中 Watch 侦听器的深入讲解：Immediate 和 Deep 参数

Vue 3 的组合式 API 为我们提供了强大的响应式编程能力，其中 watch 侦听器是一个关键的部分。它允许我们对响应式数据进行更细粒度的观察。在使用 watch 时，我们经常会用到两个非常有用的配置参数：immediate 和 deep。

Watch 侦听器的基本用法

在介绍 immediate 和 deep 之前，让我们先回顾一下 watch 侦听器的基本用法：

import { ref, watch } from 'vue';

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

    watch(count, (newValue, oldValue) => {
      console.log(`计数器的值从 ${oldValue} 变为 ${newValue}`);
    });

    // ...其他逻辑
  }
}

Immediate 参数

immediate 参数用于控制 watch 侦听器是否在初次执行时立即触发回调函数。

不使用 Immediate

默认情况下，watch 侦听器在创建时不会立即执行回调函数，它只会在侦听的响应式引用发生变化时被触发。

使用 Immediate

如果我们想要在 watch 创建的同时立即执行一次回调，可以设置 immediate: true。

watch(count, (newValue, oldValue) => {
  // 即使 count 没有变化，这里也会立即执行，并且 oldValue 为 undefined
  console.log(`计数器的值从 ${oldValue} 变为 ${newValue}`);
}, { immediate: true });

在开发中，immediate 参数特别有用，例如，当我们需要基于当前的响应式状态立即运行副作用时。

Deep 参数

deep 参数用于指定 watch 侦听器是否需要深度观察对象内部值的变化。

不使用 Deep

默认情况下，如果我们的响应式数据是一个对象，watch 只能检测到对象的第一层属性的变化。

使用 Deep

如果我们需要侦听一个对象内部深层属性的变化，我们可以设置 deep: true。

const userProfile = ref({
  name: '张三',
  preferences: {
    theme: 'dark'
  }
});

watch(userProfile, (newValue, oldValue) => {
  // 当 userProfile 内部的任何属性改变时，这里都会执行
  console.log('用户配置发生变化');
}, { deep: true });

在实际应用中，使用 deep 参数可以帮助我们捕捉到嵌套对象的变化，但同时也要注意它可能会引起的性能问题，因为它会监听所有内部属性的变化。

总结

在 Vue 3 中，watch 侦听器通过 immediate 和 deep 参数提供了高度灵活的配置选项，使我们能够根据具体的场景灵活地处理数据变化。immediate 参数在需要立即反应当前状态时非常有用，而 deep 参数允许我们深入到响应式对象的内部，监视其嵌套属性的变动。恰当地使用这些特性，可以大大增强我们应用的响应能力和用户体验。