简介
在 Vue 的 Composition API 中,watch
和 watchEffect
是两个用于观察和响应数据变化的函数。虽然这两者有一些相似性,但它们的用途和行为有一些关键区别。
watch
的介绍与使用
使用
watch
用于观察一个或多个响应式引用或计算属性,并在它们更改时执行一个函数。
javascript
import { ref, watch } from 'vue';
export default {
setup() {
const count = ref(0);
watch(count, (newVal, oldVal) => {
console.log(`count changed from ${oldVal} to ${newVal}`);
});
}
}
选项
- immediate: 是否立即执行回调函数。
- deep: 是否深度观察(适用于对象或数组)。
- flush : 控制回调何时执行(
pre
,post
,sync
)。
watchEffect
的介绍与使用
使用
watchEffect
用于立即执行一个函数,并响应该函数内部所依赖的所有响应式引用或计算属性。
javascript
import { ref, watchEffect } from 'vue';
export default {
setup() {
const count = ref(0);
watchEffect(() => {
console.log(`count is now ${count.value}`);
});
}
}
主要区别与相关点
主要区别
-
自动侦测依赖 vs 显式声明 :
watchEffect
自动侦测函数内所用到的所有响应式引用,而watch
需要你明确指定要观察的引用。 -
立即执行 :
watchEffect
创建时会立即执行一次,而watch
默认不会,除非设置了immediate
选项。 -
旧值与新值 :
watch
回调提供新值和旧值,而watchEffect
不提供。 -
多源观察 :
watch
可以观察多个源,但watchEffect
观察函数内的所有响应式引用。
相关点
- 响应性: 两者都提供强大的响应性支持。
- 生命周期: 在组件卸载时,两者都会自动停止观察。
使用场景
-
使用
watch
:- 当你需要访问旧值和新值。
- 当你需要基于条件观察某个值。
- 当你需要更细粒度的控制(如
deep
,flush
等选项)。
-
使用
watchEffect
:- 当你需要依赖多个响应式引用,并希望所有这些改变都触发同一函数。
- 当你不需要旧值,只关心新值。
总结
watch
和 watchEffect
在 Vue 的 Composition API 中都是非常有用的工具,用于不同的观察和响应场景。理解它们的区别和使用场景是高效使用 Vue 的关键。
如果你有任何进一步的问题或需要详细解释,随时提出。希望这篇文章能帮助你更好地理解 watch
和 watchEffect
的不同用途和行为。