Vue 3的`watchEffect`与`watch`：如何根据场景选择合适的监听器？ - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

Vue 3 的 `watchEffect` 与 `watch`: 场景化选择监听器的艺术

大家好，今天我们来深入探讨 Vue 3 中响应式编程的两大利器：watchEffect 和 watch。理解它们之间的差异，并学会根据不同的场景选择合适的监听器，是成为一名高效 Vue 开发者的关键一步。

响应式编程的核心：数据驱动视图

在深入 watchEffect 和 watch 之前，我们先回顾一下 Vue 3 响应式编程的核心概念：数据驱动视图。这意味着我们的视图 (UI) 会自动根据数据的变化而更新。Vue 3 通过 Proxy 对象实现了细粒度的响应式追踪，当数据被读取或修改时，相关的副作用 (effects) 就会被触发。

watchEffect 和 watch 正是用于创建这些副作用的工具，它们允许我们在响应式数据发生变化时执行特定的代码。

`watchEffect`: 自动追踪依赖的副作用

watchEffect 是一个立即执行的函数，它会自动追踪在其执行过程中访问的所有响应式依赖。这意味着，只要 watchEffect 内部用到的任何响应式数据发生变化，该函数就会重新执行。

基本用法:

import { ref, watchEffect } from 'vue';

const count = ref(0);

watchEffect(() => {
  console.log(`Count is: ${count.value}`);
});

// 初始执行: "Count is: 0"

count.value++; // 触发 watchEffect 重新执行
// 输出: "Count is: 1"

在这个例子中，watchEffect 会立即执行一次，打印出 Count is: 0。随后，当 count.value 的值发生改变时，watchEffect 会自动重新执行，打印出新的 count 值。

优点:

简单易用: 无需手动指定监听的依赖项，watchEffect 会自动完成。
自动追踪依赖: 避免了手动维护依赖列表的麻烦，降低了出错的可能性。
惰性求值: 首次执行也是立即执行，反应迅速。

缺点:

可能追踪到不必要的依赖: 如果 watchEffect 内部的代码逻辑过于复杂，可能会意外地访问到一些不相关的响应式数据，导致不必要的重复执行。
无法访问新旧值: watchEffect 无法直接获取到响应式数据变化前后的值，只能访问当前值。
首次执行不可避免: watchEffect 总是会立即执行一次，即使初始值不需要触发副作用。

应用场景:

简单的副作用: 当副作用的逻辑比较简单，且依赖关系明确时，watchEffect 是一个不错的选择。例如，根据响应式数据更新 DOM 元素，发送简单的网络请求等。
创建计算属性: 虽然 Vue 提供了 computed 函数，但在某些特殊情况下，watchEffect 也可以用来创建计算属性。
与第三方库集成: 当需要根据响应式数据与第三方库进行交互时，watchEffect 可以方便地监听数据的变化，并执行相应的操作。

示例：基于响应式数据更新 DOM

<template>
  <p>Message: {{ message }}</p>
</template>

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

const message = ref('Hello, Vue!');

watchEffect(() => {
  document.title = message.value; // 更新 document 的 title
});
</script>

在这个例子中，watchEffect 会自动监听 message 的变化，并更新 document.title。

停止 watchEffect:

watchEffect 函数会返回一个停止句柄，调用该句柄可以停止监听。

import { ref, watchEffect } from 'vue';

const count = ref(0);

const stop = watchEffect(() => {
  console.log(`Count is: ${count.value}`);
});

count.value++; // 触发 watchEffect 重新执行
// 输出: "Count is: 1"

stop(); // 停止监听

count.value++; // 不会触发 watchEffect 重新执行

`watch`: 精确控制依赖的监听器

watch 允许我们显式地指定要监听的响应式数据，并提供更丰富的配置选项，例如访问新旧值、控制执行时机等。

基本用法:

import { ref, watch } from 'vue';

const count = ref(0);

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

count.value++; // 输出: "Count changed from 0 to 1"

在这个例子中，我们明确地指定 watch 监听 count 的变化。当 count.value 发生改变时，回调函数会被执行，并接收到新值和旧值。

监听多个依赖:

watch 可以同时监听多个响应式数据。

import { ref, watch } from 'vue';

const firstName = ref('John');
const lastName = ref('Doe');

watch(
  [firstName, lastName],
  ([newFirstName, newLastName], [oldFirstName, oldLastName]) => {
    console.log(`Name changed from ${oldFirstName} ${oldLastName} to ${newFirstName} ${newLastName}`);
  }
);

firstName.value = 'Jane'; // 输出: "Name changed from John Doe to Jane Doe"

监听响应式对象属性:

watch 可以监听响应式对象的单个属性。

import { reactive, watch } from 'vue';

const user = reactive({
  name: 'John',
  age: 30
});

watch(
  () => user.age, // 使用 getter 函数
  (newValue, oldValue) => {
    console.log(`Age changed from ${oldValue} to ${newValue}`);
  }
);

user.age = 31; // 输出: "Age changed from 30 to 31"

watch 的配置选项:

watch 函数接受一个可选的配置对象，可以用来控制监听器的行为。

选项	类型	描述
`immediate`	`boolean`	是否在侦听器创建时立即执行回调。默认值为 `false`。
`deep`	`boolean`	是否深度监听对象内部属性的变化。默认值为 `false`。
`flush`	`'pre' \| 'post' \| 'sync'`	控制回调函数的执行时机。`'pre'` 表示在 DOM 更新之前执行（默认值）；`'post'` 表示在 DOM 更新之后执行； `'sync'` 表示同步执行。
`onTrack`	`Function`	用于调试。在响应式依赖被追踪时调用。
`onTrigger`	`Function`	用于调试。在侦听器回调被触发时调用。

示例：使用 immediate 选项

import { ref, watch } from 'vue';

const count = ref(0);

watch(
  count,
  (newValue, oldValue) => {
    console.log(`Count changed from ${oldValue} to ${newValue}`);
  },
  { immediate: true } // 立即执行回调
);

// 初始执行: "Count changed from undefined to 0"
count.value++; // 输出: "Count changed from 0 to 1"

示例：使用 deep 选项

import { reactive, watch } from 'vue';

const user = reactive({
  address: {
    city: 'New York'
  }
});

watch(
  () => user.address,
  (newValue, oldValue) => {
    console.log(`Address changed`);
  },
  { deep: true } // 深度监听
);

user.address.city = 'Los Angeles'; // 输出: "Address changed"

优点:

精确控制依赖: 可以显式地指定要监听的响应式数据，避免追踪不必要的依赖。
访问新旧值: 可以直接获取到响应式数据变化前后的值，方便进行更精细的控制。
丰富的配置选项: 提供了 immediate、deep、flush 等配置选项，可以灵活地控制监听器的行为。
可以监听 getter 函数: 这使得可以监听对象的单个属性，而不是整个对象。

缺点:

需要手动指定依赖: 增加了代码的复杂性，需要手动维护依赖列表。
可能遗漏依赖: 如果忘记指定某个依赖项，可能会导致监听器无法正确地响应数据的变化。

应用场景:

需要访问新旧值: 当需要根据响应式数据的变化前后值进行特定处理时，watch 是一个更好的选择。
需要精确控制依赖: 当需要避免追踪不必要的依赖，或者需要监听对象的单个属性时，watch 是一个更好的选择。
需要控制执行时机: 当需要在 DOM 更新之前或之后执行回调函数时，可以使用 flush 选项。
深度监听复杂对象: 当需要监听复杂对象内部属性的变化时，可以使用 deep 选项。

示例：基于新旧值执行不同的操作

<template>
  <p>Count: {{ count }}</p>
</template>

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

const count = ref(0);

watch(
  count,
  (newValue, oldValue) => {
    if (newValue > oldValue) {
      console.log('Count increased!');
    } else {
      console.log('Count decreased!');
    }
  }
);
</script>

`watchEffect` vs. `watch`: 如何选择

现在我们已经了解了 watchEffect 和 watch 的基本用法和优缺点，接下来我们来讨论如何根据不同的场景选择合适的监听器。

特性	`watchEffect`	`watch`
依赖追踪	自动追踪所有访问的响应式依赖。	需要手动指定要监听的依赖。
新旧值	无法直接访问新旧值。	可以直接访问新旧值。
执行时机	立即执行，并自动追踪依赖变化。	默认情况下，在依赖变化后执行。可以使用 `immediate` 选项立即执行。
配置选项	选项较少，主要用于控制副作用的执行。	提供了更丰富的配置选项，例如 `immediate`、`deep`、`flush` 等，可以更灵活地控制监听器的行为。
适用场景	简单的副作用，依赖关系明确，不需要访问新旧值。	需要访问新旧值，需要精确控制依赖，需要控制执行时机，需要深度监听复杂对象。
代码简洁性	通常更简洁，尤其是在依赖关系简单的情况下。	代码可能更冗长，因为需要手动指定依赖。
性能	在依赖追踪精确的情况下，性能相近。如果 `watchEffect` 追踪了不必要的依赖，可能会导致性能下降。	在正确配置依赖的情况下，性能通常更好，因为可以避免不必要的追踪。

决策流程:

是否需要访问新旧值?
- 如果需要，选择 watch。
- 如果不需要，继续下一步。
是否需要精确控制依赖?
- 如果需要，选择 watch。
- 如果不需要，继续下一步。
副作用的逻辑是否简单?
- 如果是，选择 watchEffect。
- 如果不是，选择 watch。

最佳实践:

优先使用 watchEffect: 在大多数情况下，watchEffect 已经足够满足需求。
谨慎使用 deep 选项: 深度监听会带来性能开销，尽量避免不必要的深度监听。
及时停止监听: 当组件卸载时，或者不再需要监听时，及时停止监听，避免内存泄漏。

深入理解 `flush` 选项

flush 选项控制 watch 监听器回调的执行时机，它有三个可选值：'pre' (默认), 'post', 和 'sync'。理解它们的区别对于编写高性能的 Vue 应用至关重要。

'pre' (默认): 回调函数会在 Vue 组件更新 DOM 之前执行。这意味着你可以在回调函数中访问到最新的响应式数据，但 DOM 尚未更新。适用于需要在 DOM 更新前修改响应式数据的情况。
'post': 回调函数会在 Vue 组件更新 DOM 之后执行。这意味着你可以在回调函数中访问到最新的响应式数据和更新后的 DOM。适用于需要在 DOM 更新后进行操作的情况，例如获取元素的尺寸、位置等。
'sync': 回调函数会同步执行。这意味着在响应式数据发生变化后，回调函数会立即执行，阻塞 JavaScript 线程。应该尽量避免使用 'sync'，因为它可能会导致性能问题。

示例：使用 flush: 'post' 获取更新后的 DOM 尺寸

<template>
  <div ref="myDiv">Content</div>
</template>

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

const myDiv = ref(null);

onMounted(() => {
  watch(
    () => myDiv.value,
    (newDiv) => {
      if (newDiv) {
        console.log(`Div width: ${newDiv.offsetWidth}`);
      }
    },
    { flush: 'post' } // 在 DOM 更新后执行
  );
});
</script>

在这个例子中，我们使用 flush: 'post' 确保在回调函数执行时，myDiv 已经渲染到 DOM 中，并且 offsetWidth 属性可以正确获取。

案例分析：复杂的表单验证

假设我们需要实现一个复杂的表单验证功能，该表单包含多个输入框，并且验证规则之间存在依赖关系。例如，如果用户选择了某个选项，则需要验证另一个输入框是否为空。

在这种情况下，watch 是一个更好的选择，因为它可以让我们精确地控制依赖关系，并根据不同的情况执行不同的验证逻辑。

<template>
  <input type="text" v-model="name" />
  <input type="email" v-model="email" />
  <select v-model="country">
    <option value="US">United States</option>
    <option value="CA">Canada</option>
  </select>
  <input type="text" v-if="country === 'US'" v-model="state" />
  <p v-if="nameError">{{ nameError }}</p>
  <p v-if="emailError">{{ emailError }}</p>
  <p v-if="stateError">{{ stateError }}</p>
  <button @click="validateForm">Validate</button>
</template>

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

const name = ref('');
const email = ref('');
const country = ref('US');
const state = ref('');

const nameError = ref('');
const emailError = ref('');
const stateError = ref('');

const validateForm = () => {
  nameError.value = '';
  emailError.value = '';
  stateError.value = '';

  if (!name.value) {
    nameError.value = 'Name is required';
  }

  if (!email.value) {
    emailError.value = 'Email is required';
  }

  if (country.value === 'US' && !state.value) {
    stateError.value = 'State is required';
  }
};

watch(name, () => {
  if (name.value) {
    nameError.value = '';
  }
});

watch(email, () => {
  if (email.value) {
    emailError.value = '';
  }
});

watch(country, () => {
    state.value = ''; // Reset the state when the country changes
  if (country.value === 'US' && !state.value) {
    stateError.value = 'State is required';
  } else {
        stateError.value = '';
  }
});

watch(state, () => {
  if (state.value) {
    stateError.value = '';
  }
});
</script>

在这个例子中，我们使用 watch 监听 name、email、country 和 state 的变化，并根据这些值动态地更新错误信息。我们还使用 v-if 指令来动态地显示 state 输入框，只有当 country 的值为 "US" 时才会显示。

结论：灵活运用，提升开发效率

watchEffect 和 watch 都是 Vue 3 响应式编程的重要组成部分。理解它们之间的差异，并学会根据不同的场景选择合适的监听器，可以帮助我们编写更简洁、更高效、更易于维护的代码。记住，没有绝对的“最佳”选择，只有最适合特定场景的选择。

选择合适的监听器，让响应式编程更高效
watchEffect 简单易用，自动追踪依赖，适合简单的副作用。watch 精确控制依赖，访问新旧值，适合复杂的场景。

Vue 3 的 watchEffect 与 watch: 场景化选择监听器的艺术

响应式编程的核心：数据驱动视图

watchEffect: 自动追踪依赖的副作用

watch: 精确控制依赖的监听器

watchEffect vs. watch: 如何选择

深入理解 flush 选项