悠悠楠杉
网站页面
Vue中watchEffect的追踪逻辑介绍
06/06
Vue中watchEffect的追踪逻辑介绍
在Vue 3中，watchEffect是一个强大的响应式工具，它允许你执行一个副作用（side effect），即一个可能改变响应式状态但不会返回响应式数据的函数。watchEffect与watch不同，它不依赖于任何特定的数据变化，而是立即执行一次，然后当依赖的响应式状态变化时再次执行。这种机制使得watchEffect非常适合初始化异步操作或任何形式的副作用。
1. 什么是watchEffect？
watchEffect函数接受一个函数作为参数，这个函数本身可以访问和操作响应式状态。当执行器（effect）的依赖项发生变化时，该函数会被重新执行。watchEffect不会返回新的响应式数据，它仅仅触发副作用的更新。
2. watchEffect的工作原理
2.1 初始化
- 当
watchEffect被调用时，它会立即执行传入的函数（称为“effect”）。 - 在执行过程中，Vue会追踪effect中用到的所有响应式属性（称为“依赖”）。
- 一旦effect执行完成，Vue会存储这些依赖项的引用，为后续的更新做准备。
2.2 依赖追踪
- 当这些依赖项中的任何一个发生变化时（例如，某个响应式数据被修改），Vue会重新执行effect函数。
- 这确保了每当这些依赖项变化时，相关的副作用都能被正确触发和执行。
2.3 清理与重置
watchEffect还提供了一个可选的清理函数（cleanup function），它允许你在effect不再需要时执行一些清理操作。- 例如，如果effect包含订阅事件或定时器等资源，你可以在cleanup函数中取消这些操作以避免内存泄漏。
- 清理函数仅在组件卸载或
watchEffect显式停止时调用。
3. 示例与用途
3.1 初始化异步数据
```javascript
import { watchEffect } from 'vue';
const fetchData = async () => {
// 模拟异步获取数据
return new Promise(resolve => setTimeout(() => resolve('新数据'), 1000));
};
const myEffect = () => {
const data = fetchData().then(data => console.log(data)); // 异步获取数据并打印到控制台
};
watchEffect(myEffect); // 立即执行并开始追踪依赖的异步数据变化
```
3.2 组件挂载和卸载处理
```javascript
import { onMounted, onUnmounted, watchEffect } from 'vue';
const handleCleanup = () => {
console.log('执行清理操作'); // 例如：取消事件监听、清除定时器等
};
onMounted(() => {
watchEffect(() => {
console.log('组件已挂载'); // 仅作为示例输出，实际使用时应包含更多逻辑
}, handleCleanup); // 传递清理函数以在组件卸载时执行清理操作
});
```
3.3 动态更新DOM或其他状态依赖项
javascript
const count = ref(0); // 使用Vue的响应式引用创建状态变量count
const updateDOM = () => { /* 更新DOM元素 */ }; // 模拟DOM更新逻辑的函数
const effect = () => { updateDOM(); }; // 包含DOM更新的effect函数
watchEffect(effect); // 当count值变化时，重新执行effect并更新DOM元素。
4. watchEffect与watch的区别与选择使用场景：
- 区别：
watchEffect总是立即执行一次，而watch则仅在监视的响应式引用发生变化时执行。watch可以返回一个清理函数用于清理资源。而watchEffect自动处理依赖项的变化和清理操作。 - 选择使用场景：如果你需要一个不依赖于特定数据变化而运行的副作用（如初始化异步数据、设置定时器等），那么
watchEffect是更合适的选择。如果你需要基于特定数据变化来触发逻辑（如计算值、数据过滤等），则应使用watch。
