深入理解 Vue 3 中 watch 与 watchEffect 的区别

在 Vue 3 的响应式系统里，watch 和 watchEffect 是监听响应式数据变化的重要函数，它们在不同场景下发挥着关键作用。本文将详细介绍这两个函数，并结合代码示例说明它们的区别。

简单状态绑定与计算属性

ref 与 reactive 实现简单状态绑定

在 Vue 3 中，ref 和 reactive 用于创建响应式数据。ref 常用于基本数据类型的响应式包装，而 reactive 则用于对象和数组的响应式处理。

xml 复制代码

<template>
  <div>
    <p>{{ count }}</p>
    <p>{{ user.name }}</p>
  </div>
</template>

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

// 使用 ref 创建响应式数据
const count = ref(0);

// 使用 reactive 创建响应式对象
const user = reactive({ name: 'John' });
</script>

computed 实现响应式数据计算

computed 用于创建响应式计算属性，它会自动处理依赖，当依赖的数据发生变化时，计算属性会自动更新。以购物车总价计算为例：

xml 复制代码

<template>
  <div>
    <p>商品单价：{{ price }}</p>
    <p>商品数量：{{ quantity }}</p>
    <p>总价：{{ total }}</p>
  </div>
</template>

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

// 商品单价
const price = ref(10);
// 商品数量
const quantity = ref(2);

// 计算总价
const total = computed(() => price.value * quantity.value);
</script>

watch：监听响应式数据变化执行复杂逻辑

手动指定依赖执行复杂业务

watch 函数用于监听特定的响应式数据变化，并在数据变化时执行复杂的逻辑，如异步请求、检查库存等。以下是一个简单的示例，监听 count 的变化，并在变化时发起异步请求：

vue

xml 复制代码

<template>
  <div>
    <button @click="count++">增加计数</button>
    <p>计数：{{ count }}</p>
  </div>
</template>

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

// 创建响应式数据
const count = ref(0);

// 监听 count 的变化
watch(count, async (newValue, oldValue) => {
  // 模拟异步请求
  const response = await fetch(`https://api.example.com/data?count=${newValue}`);
  const data = await response.json();
  console.log('异步请求结果：', data);
});
</script>

立即执行监听逻辑

默认情况下，watch 是惰性的，即只有在监听的数据发生变化时才会执行回调函数。如果需要在组件初始化时立即执行回调函数，可以设置 immediate: true：

xml 复制代码

<template>
  <div>
    <p>计数：{{ count }}</p>
  </div>
</template>

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

// 创建响应式数据
const count = ref(0);

// 立即执行监听逻辑
watch(count, (newValue, oldValue) => {
  console.log(`计数从 ${oldValue} 变为 ${newValue}`);
}, { immediate: true });
</script>

watchEffect：立即执行并自动处理依赖

自动收集依赖并执行副作用

watchEffect 会立即执行传入的回调函数，并自动追踪回调函数中使用的所有响应式依赖。当这些依赖发生变化时，回调函数会再次执行。以下是一个示例：

xml 复制代码

<template>
  <div>
    <button @click="count++">增加计数</button>
    <p>计数：{{ count }}</p>
  </div>
</template>

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

// 创建响应式数据
const count = ref(0);

// 立即执行并自动处理依赖
watchEffect(() => {
  console.log(`当前计数为 ${count.value}`);
});
</script>

总结

手动 vs 自动 ：watch 需要手动指定要监听的依赖，而 watchEffect 会自动收集依赖。
立即执行 ：watchEffect 会立即执行一次回调函数，而 watch 默认是惰性的，需要设置 immediate: true 才能立即执行。
使用场景 ：watch 适用于需要明确知道数据变化前后的值，并执行复杂逻辑的场景；watchEffect 适用于只关心副作用的执行，而不关心具体是哪个依赖导致了副作用执行的场景。

通过合理使用 watch 和 watchEffect，可以更好地管理 Vue 3 应用中的响应式数据变化，提高代码的可维护性和性能。