Vue 3 Composition API：巧用 `watchEffect` 与 `watch` 应对响应式数据变化

2024-03-02 10:49:15

Vue 3 Composition API：巧用 watchEffect 与 watch

导言

在 Vue 3 的 Composition API 中，watchEffect 和 watch 都是用来响应响应式数据变化的工具。它们虽然看似相似，但各有千秋，适合不同的场景。本文将深入剖析这两者的异同，帮助你了解它们的特性和适用场合。

`watchEffect`：简单易用的响应式副作用

watchEffect 的作用是对响应式数据的变化执行副作用操作。它不依赖先前的值，也不提供清理函数。因此，使用场景包括：

执行与当前响应式数据状态无关的副作用操作，如修改视图、触发其他响应式更新等。
当副作用操作非常简单，不需要在侦听结束时执行任何清理操作时。

`watch`：高级灵活的响应式侦听器

watch 是一个更高级的响应式侦听器，它提供以下选项：

侦听的属性： 你可以指定要侦听的特定属性，实现更细粒度的侦听。
深度侦听： 可以设置是否深度侦听，即是否侦听嵌套对象的属性变化。
立即执行： 控制侦听器是否在首次渲染时立即执行。
侦听结束时的回调函数： 当侦听器被停止时执行清理操作。

因此，watch 适合以下场景：

需要侦听特定属性的变化，且变化可能影响到先前的值。
需要在侦听结束时执行清理操作，如取消订阅数据流。
需要对嵌套对象的属性进行深度侦听。
需要立即执行侦听器。

关键差异

为了更直观地了解 watchEffect 和 watch 的区别，我们总结了它们的以下关键差异：

特性	watchEffect	watch
函数签名	`watchEffect(effect)`	`watch(source, cb, options?)`
使用场景	简单的响应式副作用	高级响应式侦听器
副作用依赖	不依赖先前的值	可能依赖先前的值
清理函数	无	可选
深度侦听	不支持	支持
立即执行	不支持	支持

停止和重新激活 `watchEffect`

由于 watchEffect 没有直接停止和重新激活的 API，我们需要以下变通方法：

在副作用函数中返回一个函数，用于在侦听器停止时执行清理操作。
在组件的 onUnmounted 钩子中调用清理函数。
在需要重新激活侦听器时，再次调用 watchEffect。

结论

watchEffect 和 watch 都是 Vue Composition API 中用于响应响应式数据变化的强大工具。了解它们的差异可以帮助你选择最适合你特定需求的 API。使用 watchEffect 时，关注于简单的响应式副作用，而 watch 则更适合需要更多控制和灵活性的高级用例。

常见问题解答

什么时候应该使用 watchEffect？
- 当需要执行与当前响应式数据状态无关的副作用操作时。
- 当副作用操作非常简单，不需要在侦听结束时执行任何清理操作时。
什么时候应该使用 watch？
- 需要侦听特定属性的变化，且变化可能影响到先前的值。
- 需要在侦听结束时执行清理操作，如取消订阅数据流。
- 需要对嵌套对象的属性进行深度侦听。
- 需要立即执行侦听器。
如何停止和重新激活 watchEffect？
- 使用上面提到的变通方法。
watchEffect 和 watch 哪个更好？
- 这取决于你的具体需求。watchEffect 更简单易用，而 watch 提供了更多的控制和灵活性。
什么时候应该避免使用 watchEffect 和 watch？
- 当侦听器非常复杂或需要执行大量操作时，可以使用更高级的响应式工具，如 computed。