Vue 3 中的 watch 与 watchEffect 用法详解

在 Vue 3 中，响应式编程的机制得到了增强，watch 和 watchEffect 是两个非常重要的 API，用于观察和响应数据变化。这两者在功能上有所不同，各自有其特定的应用场景和用法。以下是对这两者的深入解析。

一、watch 的用法

watch 是用于观察 Vue 实例中数据变化的 API。它可以用来观察一个或多个响应式数据源，并在这些数据源发生变化时执行特定的回调函数。

1. 基本语法

import { watch } from 'vue';

watch(source, callback, options);

• source：要观察的响应式数据，通常是 ref 或 reactive 中的属性。
• callback：当 source 发生变化时执行的回调函数。该函数接受两个参数：新值和旧值。
• options：可选参数，可以设置 immediate 和 deep 等选项。

2. 示例代码

以下是一个使用 watch 的简单示例：

<template>
  <div>
    <input v-model="count" />
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
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 };
  },
};
</script>

在这个示例中，当用户在输入框中修改 count 的值时，watch 将会监控到这个变化并输出新的值和旧的值。

3. options 的使用

可以使用 options 对 watch 的行为进行配置：

• immediate：设置为 true 时，回调函数会在初始值设置后立即调用。
• deep：设置为 true 时，watch 将深度监控对象内的属性变化。

示例：

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

二、watchEffect 的用法

watchEffect 是 Vue 3 提供的另一种响应式 API，它会在其内部的响应式数据变化时自动重新执行。这与 watch 的明确数据源观察不同，watchEffect 更加灵活，适合于简化的场景。

1. 基本语法

import { watchEffect } from 'vue';

watchEffect(effect);

• effect：一个函数，内部可以访问响应式数据。当这些数据变化时，effect 会被重新执行。

2. 示例代码

以下是一个使用 watchEffect 的简单示例：

<template>
  <div>
    <input v-model="count" />
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
  </div>
</template>

<script>
import { ref, watchEffect } from 'vue';

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

    watchEffect(() => {
      doubleCount.value = count.value * 2;
      console.log(`Double Count: ${doubleCount.value}`);
    });

    return { count, doubleCount };
  },
};
</script>

在这个示例中，doubleCount 会随着 count 的变化而自动更新，watchEffect 会在每次变化时重新计算 doubleCount 的值。

3. watch 和 watchEffect 的区别

三、总结

在 Vue 3 中，watch 和 watchEffect 都是用于响应式编程的重要工具。watch 适合于需要明确监控某个数据源变化的场景，而 watchEffect 则适用于需要根据多个响应式数据进行动态计算的场合。

选择适当的 API 可以帮助开发者更好地管理应用中的数据流和状态变化，从而实现更高效的开发。

思维导图示例

- Vue 3
  - watch
    - 观察特定数据源
    - 语法
    - 示例
    - options
  - watchEffect
    - 自动响应依赖
    - 语法
    - 示例
  - 区别

通过本文的介绍，开发者应能够深入理解 watch 和 watchEffect 的用法，并在实际项目中合理使用它们。