Vue - watchEffect()的使用

在 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 :

  1. 都能监视响应式数据的变化,不同的是监视数据变化的方式不同;
  2. watch : 要明确指出监视的数据;
  3. watchEffect : 不用明确指出监视的数据(函数中用到哪些属性,那就监视哪些属性)。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值