Vue：watchEffect的作用与性质
目录
一.watchEffect的作用
二.watchEffect的性质
三. `watch`对比`watchEffect`
四.watchEffect的使用
在 Vue 中，watchEffect 是一个用于副作用处理的函数，它是 Vue 3 Composition API 的一部分。它的主要作用是自动追踪其内部依赖的响应式状态，并在依赖发生变化时重新执行。立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。
一.watchEffect的作用
- 自动收集依赖：
watchEffect会自动收集其内部使用的所有响应式状态，并在这些状态变化时重新执行。 - 执行副作用：它允许你执行一些依赖于响应式状态的副作用，比如数据请求、计算或 DOM 操作。
- 性能优化：由于
watchEffect会智能地追踪依赖，因此它只会在其依赖发生变化时才执行，这有助于避免不必要的计算和性能损耗。
二.watchEffect的性质
-
自动依赖追踪：当你在
watchEffect中访问响应式状态时，Vue 会自动将这些状态标记为依赖，并在状态变化时重新执行watchEffect。 -
立即执行：
watchEffect在被调用时会立即执行一次，并追踪其内部依赖。 -
返回停止函数：
watchEffect返回一个函数，该函数可以用来停止watchEffect的执行。调用这个返回的函数可以停止追踪依赖和执行副作用。 -
响应式更新：当
watchEffect中的响应式状态发生变化时，Vue 会自动更新 DOM。
三. `watch`对比`watchEffect`
| 特性 | watch | watchEffect |
|---|---|---|
| 依赖追踪 | 显式指定 | 自动追踪 |
| 执行时机 | 惰性执行（默认） | 立即执行 |
| 回调函数参数 | 接收新值和旧值 | 不接收参数 |
| 适用场景 | 需要精确控制监听哪些状态 | 需要自动追踪所有依赖 |
| 停止监听 | 返回停止函数 | 返回停止函数 |
四.watchEffect的使用
<template>
<div>
<p>{{ message }}</p>
<p>{{ count }}</p>
</div>
</template>
<script>
import { ref, watchEffect } from 'vue';
export default {
setup() {
const message = ref('Hello');
const count = ref(0);
// watchEffect 将立即执行一次，并在依赖项变化时重新运行
watchEffect(() => {
console.log(`count is: ${count.value}`);
// 这里可以执行一些副作用，例如更新 DOM 或发送请求
});
// 停止 watchEffect
const stopWatch = watchEffect(() => {
console.log(`count is: ${count.value}`);
});
// 当你想要停止监听时，可以调用这个函数
// stopWatch();
return {
message,
count
};
}
};
</script>