vue3 watch和watchEffect

Watch监听ref定义的数据

1.ref数据基本数据类型

let sum=ref（0）
const 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(‘已达标’)
}
})