在 Vue 3 中,watchEffect()
是一个用于自动追踪响应式数据变化并执行副作用的 API。与 watch()
不同,watchEffect()
不需要手动指定要观察的数据,而是会自动根据内部访问的响应式数据进行依赖追踪。这使得 watchEffect()
更加简洁和直观,适用于某些需要副作用的场景。
简单说:立即执行一个函数,同时响应式地追踪其依赖,并在依赖的数据更改时重新执行该函数。
基本语法:
watchEffect(effect, options)
- 参数说明:
effect
: 这是一个函数,包含你想要执行的副作用逻辑。该函数可以访问任何响应式数据,并在其变化时自动重新执行。options
: (可选)一个对象,允许你传入一些控制选项,比如flush
(执行时机)和onStop
(清理函数)。- 选项参数:可以传递一个选项对象,来控制执行时机和清理逻辑等
flush
: 允许设定副作用的执行时机。可以是:"pre"
: 在 DOM 更新前执行"post"
: 在 DOM 更新后执行(默认值)"sync"
: 同步执行
onStop
: 在 stop 事件发生时调用的函数。
示例:
<template>
<div class="person">
<h2>求和:{
{sum}}</h2>
<button @click="changeSum">点击加1</button>
</div>
</template>
<script setup lang='ts' >
import { watchEffect, ref,watch } from 'vue'
const sum = ref(1);
const changeSum = () => {
sum.value += 1;
}
// 监视 当sum的值大于等于10时,输出提示
// 使用 watch 需要明确指定需要监视的数据
// watch(sum, (value) => {
// if (value >= 10) {
// console.log('sum>=10啦~~~~~~~~');
// }
// })
// 监视 watchEffect 实现
// 自动监视,不用明确指定监视的数据
// 且在一开始就会调用一次
watchEffect(() => {
if (sum.value >= 10) {
console.log(8520);
}
})
</script>
<style scoped>
</style>
在上面的示例中,watchEffect
会自动追踪 sum 的变化。每当 sum 变换时,sum也会重新显示在页面上。
watchEffect(() => {
// Some effect...
}, { flush: 'pre' });
总结:
watchEffect()
允许更简洁地编写依赖于响应式数据的副作用。- 它会根据访问的响应式数据自动触发副作用的重新执行。
- 支持清理操作和一些选项参数,有助于控制副作用的执行时机。
watch 对比 watchEffect :
- 都能监视响应式数据的变化,不同的是监视数据变化的方式不同;
- watch : 要明确指出监视的数据;
- watchEffect : 不用明确指出监视的数据(函数中用到哪些属性,那就监视哪些属性)。