Watch monitora os dados definidos pela ref
1.ref tipo de dados básicos
let sum=ref(0)
const stopWatch=watch(sum,(new,old)=>{
If(new>=10){
stopWatch()
}
console.log(‘sum数据变化了’)
})
2. Os dados de referência são um tipo de objeto, e o que é monitorado é o valor do endereço do objeto.Se você deseja monitorar as alterações nos valores dos atributos internos do objeto, é necessário habilitar manualmente o monitoramento aprofundado.
let person=ref({
name:’张三’,age:22})
watch(person,(new,old)=>{
console.log(‘person数据变化了’,new,old)//打印出来的new和old是一样的数据,因为地址没变
},{
deep:true})
3. Monitore os dados do tipo de objeto definidos por reativo e o monitoramento aprofundado é habilitado por padrão
![](https://img-blog.csdnimg.cn/direct/d571da5fe2a64da0ad6550db3b6197a3.png#pic_center
watch(person,(new,old)=>{ console.log('person data has change', new, old) //Os novos e antigos impressos são os mesmos dados, porque o endereço não mudou })
4. Ouça um determinado atributo no objeto reativo, e o atributo é um tipo de dados básico e precisa ser escrito em uma forma funcional
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})
Resumo: O que é monitorado são os atributos do objeto, por isso é melhor escrever expressões funcionais. Nota: Se o objeto monitora o valor do endereço, você precisa prestar atenção ao interior do objeto e habilitá-lo manualmente -monitoramento de profundidade.
5. Monitore vários formulários de matriz de dados
watch([()=>person.name,()=>person.car.c1],(new,old)=>{
console.log(‘person数据变化了’,new,old)
})
watchEffect monitora dados
watchEffect(()=>{
If(temp.value>=60||height.value>=80){
Console.log(‘已达标’)
}
})