目录

一.watchEffect的作用

二.watchEffect的性质

三. `watch`对比`watchEffect`

四.watchEffect的使用

---

在 Vue 中，watchEffect 是一个用于副作用处理的函数，它是 Vue 3 Composition API 的一部分。它的主要作用是自动追踪其内部依赖的响应式状态，并在依赖发生变化时重新执行。立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。

一.watchEffect的作用

• 自动收集依赖：watchEffect 会自动收集其内部使用的所有响应式状态，并在这些状态变化时重新执行。
• 执行副作用：它允许你执行一些依赖于响应式状态的副作用，比如数据请求、计算或 DOM 操作。
• 性能优化：由于 watchEffect 会智能地追踪依赖，因此它只会在其依赖发生变化时才执行，这有助于避免不必要的计算和性能损耗。

二.watchEffect的性质

1. 自动依赖追踪：当你在 watchEffect 中访问响应式状态时，Vue 会自动将这些状态标记为依赖，并在状态变化时重新执行 watchEffect。

2. 立即执行：watchEffect 在被调用时会立即执行一次，并追踪其内部依赖。

3. 返回停止函数：watchEffect 返回一个函数，该函数可以用来停止 watchEffect 的执行。调用这个返回的函数可以停止追踪依赖和执行副作用。

4. 响应式更新：当 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 或发送请求});// 停止 watchEffectconst stopWatch = watchEffect(() => {console.log(`count is: ${count.value}`);});// 当你想要停止监听时，可以调用这个函数// stopWatch();return {message,count};}
};
</script>