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