快速掌握Vue3 watchEffect用法实例分析

在Vue3中，`watchEffect` 是一个用于监听数据变化并执行相应副作用的高级API，它结合了`watch` 和 `effect` 的特性，使得状态管理更加简洁高效。本文档通过六个用例帮助我们深入理解`watchEffect` 的用法。 **用例1 - 单值与多值侦听** 1. **单值侦听**：创建两个`ref`变量`value1`和`value2`，分别赋值为1和2。`watchEffect`用于监听它们的值变化。当`value1`或`value2`的值改变时，对应的回调函数会被调用。在这个例子中，`value1`和`value2`单独改变时，只执行一次相应的回调，如`watchEffect1`和`watchEffect2`。当`value1`设置为`value2`的值后，只有`value2`再次更新时，才会触发`watchEffect2`。 2. **多值侦听**：同时监听两个值的变化，当它们同时改变时，只会触发一次回调，输出为`2个值`的新组合。在这个场景下，尽管`value1`和`value2`都发生了变化，但`watchEffect`只会执行一次，显示`2个值`的新值。 **用例2 - 副作用与清理** 1. **副作用示例**：`watchEffect`可以包含异步操作，如定时器。当`v3`值改变时，会立即执行回调，但异步操作（`setTimeout`）会在指定时间后才执行。在本例中，第一次更新值后，会看到`3'timeout'`，然后在值更新到4和5时，由于异步操作的存在，输出的还是旧值。 2. **主动清理异步**：为了控制异步操作的生命周期，可以通过传递`onInvalidate`回调来清除定时器。这样，在`v3`值改变后，之前的定时器会被取消，避免了重复的异步请求。这展示了如何优雅地处理副作用的清理，确保资源的有效利用。 `watchEffect`提供了一种灵活的方式来管理Vue组件内的数据变化响应，允许开发者更准确地控制副作用和数据处理逻辑。通过理解这些用例，我们可以更好地运用`watchEffect`提升应用的性能和用户体验。