12.3.2 watchEffect()方法-Vue.js从入门到精通(三)

当前位置:　首页>> 技术小册>> Vue.js从入门到精通(三)

### 12.3.2 `watchEffect()` 方法：Vue.js响应式系统的深度探索

在Vue.js的响应式系统中，`watchEffect()` 是一个强大的API，它允许我们自动地观察响应式状态的变化，并在这些状态变化时执行副作用函数。与 `watch()` 函数相比，`watchEffect()` 不需要明确指定要观察的数据源，它会自动追踪其执行过程中访问的所有响应式属性，并在这些属性变化时重新执行。这种自动追踪的特性使得 `watchEffect()` 在处理复杂依赖关系或进行副作用操作（如数据验证、数据转换等）时尤为方便。

#### 12.3.2.1 引入 `watchEffect()`

在Vue 3中，`watchEffect()` 是在 `Composition API` 中引入的，它作为 `vue` 对象的一个方法，在 `setup()` 函数内部使用。要使用 `watchEffect()`，你需要确保你的Vue项目是基于Vue 3构建的，并且你已经熟悉了 `Composition API` 的基本使用。

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

const count = ref(0);

watchEffect(() => {
  console.log(`count的值为: ${count.value}`);
});

// 当count的值改变时，上面的日志将会更新
</script>
```

#### 12.3.2.2 理解自动依赖追踪

`watchEffect()` 的核心在于其自动依赖追踪机制。当 `watchEffect()` 首次运行时，Vue会记录其执行过程中访问的所有响应式属性（通过getter调用）。这些被访问的属性随后被视为 `watchEffect()` 的依赖项。当这些依赖项中的任何一个发生变化时，Vue将重新执行 `watchEffect()` 中的回调函数。

这种机制的好处在于，你不需要显式地列出所有依赖项，从而减少了维护成本，特别是在处理复杂依赖关系时。然而，这也可能导致性能问题，因为Vue可能会追踪比实际需要的更多的依赖项。因此，在使用 `watchEffect()` 时，应注意保持其回调函数简洁高效，避免不必要的计算或副作用。

#### 12.3.2.3 停止观察

与 `watch()` 类似，`watchEffect()` 返回一个停止观察的函数。这个函数可以用来手动停止观察，这在某些情况下非常有用，比如在组件卸载时避免内存泄漏。

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

const count = ref(0);

const stopEffect = watchEffect(() => {
  console.log(`count的值为: ${count.value}`);
});

onUnmounted(() => {
  stopEffect(); // 组件卸载时停止观察
});
</script>
```

#### 12.3.2.4 副作用的清理

有时，在 `watchEffect()` 的副作用函数中，我们可能会执行一些需要清理的操作，比如设置定时器、添加事件监听器等。Vue允许我们通过传递一个包含两个函数的数组给 `watchEffect()` 来处理这种情况：第一个函数是执行副作用的函数，第二个函数是清理函数。

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

const count = ref(0);

watchEffect(() => {
  const timer = setInterval(() => {
    console.log(`count的值为: ${count.value}`);
  }, 1000);

// 清理函数
  return () => {
    clearInterval(timer);
  };
});
</script>
```

#### 12.3.2.5 响应式引用与计算属性

虽然 `watchEffect()` 能够自动追踪其内部使用的所有响应式引用（如 `ref` 或 `reactive`），但它并不等同于计算属性（`computed`）。计算属性是基于它们的响应式依赖进行缓存的，这意味着只要依赖项没有变化，多次访问计算属性将返回相同的值，而不会重新执行其内部的计算逻辑。相比之下，`watchEffect()` 会在每次其依赖项变化时都重新执行。

因此，在选择使用 `watchEffect()` 还是计算属性时，应根据具体需求进行权衡。如果你需要基于响应式状态进行复杂的计算或副作用操作，并且这些操作不需要缓存结果，那么 `watchEffect()` 是一个不错的选择。但如果你需要基于响应式状态计算出一个新的响应式值，并且这个值需要被缓存以避免不必要的计算，那么应该使用计算属性。

#### 12.3.2.6 注意事项与最佳实践

- **避免副作用中的异步操作**：虽然可以在 `watchEffect()` 的副作用中执行异步操作，但应谨慎使用，并确保异步操作不会引入难以追踪的副作用或性能问题。
- **保持副作用函数简洁**：为了保持代码的清晰和可维护性，应尽量避免在 `watchEffect()` 的副作用函数中编写复杂的逻辑。如果可能，将复杂的逻辑拆分为更小的函数或组件。
- **利用`onInvalidate`处理副作用的清理**：虽然可以通过返回一个清理函数来处理副作用的清理，但Vue 3还提供了 `onInvalidate` 函数作为 `watchEffect()` 回调函数的第二个参数，它提供了一种更灵活的方式来注册清理逻辑。
- **避免不必要的观察**：由于 `watchEffect()` 会自动追踪其执行过程中访问的所有响应式属性，因此应确保这些属性都是必要的，以避免不必要的性能开销。

综上所述，`watchEffect()` 是Vue.js中一个强大而灵活的API，它允许开发者以声明式的方式处理响应式状态的变化，并自动执行相关的副作用函数。通过深入理解其工作原理和最佳实践，开发者可以更有效地利用这一API来构建高效、可维护的Vue应用。

该分类下的相关小册推荐：

Vue原理与源码解析

TypeScript和Vue从入门到精通(五)

Vue面试指南

vue项目构建基础入门与实战

TypeScript和Vue从入门到精通(四)

Vue.js从入门到精通(二)

vuejs组件实例与底层原理精讲

TypeScript和Vue从入门到精通(一)

Vue.js从入门到精通(四)

TypeScript和Vue从入门到精通(三)

Vue源码完全解析

VUE组件基础与实战