vue3 watch和watchEffect

Watch监听ref定义的数据

1.ref数据基本数据类型

let sum=ref0const stopWatch=watch(sum,(new,old)=>{
If(new>=10){
stopWatch()
}
console.log(‘sum数据变化了’)
}

2.ref数据为对象类型,监听的是对象的地址值,若想监听对象内部属性值的变化,需要手动开启深度监视

在这里插入图片描述

 let person=ref{name:’张三’,age:22})

watch(person,(new,old)=>{
console.log(‘person数据变化了’,new,old)//打印出来的new和old是一样的数据,因为地址没变
}{deep:true}

3.监听reactive定义的对象类型数据,且默认开启了深度监视

![](https://img-blog.csdnimg.cn/direct/d571da5fe2a64da0ad6550db3b6197a3.png#pic_center在这里插入图片描述

watch(person,(new,old)=>{
console.log(‘person数据变化了’,new,old)//打印出来的new和old是一样的数据,因为地址没变
})

4.监听reactive对象中的某个属性,且该属性是基本数据类型,需要写成函数式

在这里插入图片描述
在这里插入图片描述

watch(()=>person.name,(new,old)=>{
console.log(‘person数据变化了’,new,old)//打印出来的new和old是不一样的
}//监听person.car  可以监听到changeC1、changeC2,但监听不到changeCar里的变化
watch(person.car,(new,old)=>{
console.log(‘person数据变化了’,new,old)//打印出来的new和old是不一样的
}//监听person.car写函数式,即监听地址  不能监听到changeC1、changeC2,但能监听到changeCar里的变化
watch(()=>person.car,(new,old)=>{
console.log(‘person数据变化了’,new,old)}//监听person.car写函数式,加deep可以监听即监听changeC1、changeC2  也监听到changeCar里的变化
watch(()=>person.car,(new,old)=>{
console.log(‘person数据变化了’,new,old)}{deep:true}

总结:监视的是对象里的属性,那么最好写函数式,注意点:若对象监听的是地址值,需要关注对象内部,需要手动开启深度监视

5.监视多个数据 数组形式

watch([()=>person.name,()=>person.car.c1],(new,old)=>{
console.log(‘person数据变化了’,new,old)
}

watchEffect监听数据

在这里插入图片描述

watchEffect(()=>{
If(temp.value>=60||height.value>=80){
  Console.log(‘已达标’)
}
})
  • 9
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值