watch
（1）监听ref 状态的变化
const num = ref(1)
watch(num,(newValue,oldValue)=>{console.log(newValue,oldValue);//2,1
})
setTimeout(()=>{num.value++
},500)
（2）computed
const num = ref(1);
const double = computed(()=> num.value*2);
watch(double,(newValue,oldValue)=>{console.log(newValue,oldValue);//4,2
})
setTimeout(()=>{num.value++
},500)
(3)reactive对象,默认是深度监听,此时newValue===oldValue
const obj = reactive({name:"xx",age: 18
})
watch(obj,(newValue,oldValue)=>{console.log(newValue===oldValue);//trueconsole.log(newValue);//Proxy(Object) {name: 'zhangsan', age: 19}
})
setTimeout(()=>{obj.name = "zhangsan";obj.age = 19
},500)
想要改变监听层级，可以配置第三个参数：
- 配置对象
- {
deep: false,//是否深度监听
once: true/false, //回调是否执行一次，默认false
immediate: true/false,//是否立即执行，默认false
}
（4）监听多个数据
const num = ref(1);
const sex = ref("male");
watch([num,sex],(newValue,oldValue)=>{console.log(newValue,oldValue);
})
setTimeout(()=>{num.value++;sex.value = "female"
},500)
(5)监听getter
const obj = reactive({name:"xx",age: 18
})
watch(()=>obj.age,(newValue,oldValue)=>{console.log(newValue,oldValue);//19,18
})
setTimeout(()=>{obj.name = "zhangsan";obj.age = 19
},500)
watchEffect
（1）不指定依赖的响应式数据，在回调函数中读取了那个响应式数据，就建立一个依赖
（2）会立即执行一次
触发回调时机
- 默认触发回调是在父组件更新之后，DOM更新之前，想要改变回调函数执行时间，可以使用配置参数：flush：‘post’
停止监听
- 顶级同步的监听器在组件被销毁的时候会自动销毁，异步的监听需要手动销毁
const obj = reactive({name:"xx",age: 18
})
let uwatch;
setTimeout(()=>{uwatch=watch(obj,(newValue,oldValue)=>{console.log(newValue,oldValue); })
},500)
setTimeout(()=>{obj.name = "zhangsan" //执行watch回调
},1500)
setTimeout(()=>{uwatch();//销毁监听
},5000)
setTimeout(()=>{obj.age = 19;//此时已经没有watch
},7500)
