Vue3中watch 与 watchEffect的区别

watchEffect和watch的区别:

1. watchEffect功能更强大,初始和卸载 (也可以替代生命周期钩子的一些功能)

2. watch可以拿到新值和旧值的,newVal oldVal

watch指定监视具体哪个响应式数据,发生改变,触发回调函数

watch第一个参数监听源
watch第二个参数回调函数(newVal,oldVal)
watch第三个参数一个options配置项是一个对象{
immediate:true //是否立即调用一次
deep:true 是否开启深度监听
}

watchEffect不用指定监视哪个响应式数据,监视的回调中用到哪个响应式数据就监视哪个,触发回调函数

  watchEffect((cb)=>{   初始的时候,就会触发这个回调函数 (created),DOM更新前触发的

    在回调中使用了对应的响应式数据,那么只要这个对应的响应式数据发生改变,就会重新触发回调
    console.log(count.value)
    //每次用户id发生变化,触发,获取当前用户的信息
    //axios.get(`/api/users?id=${userid.value}`)

    timer = setInterval()
    //console.log(1111111)
    cb(()=>{   卸载组件的时候会触发( 做一些清理工作 ),还可以在响应式数据更新前触发
      console.log(2222222)
       clearInterval(timer)
    })

  })

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值