vue3 watchwa watchEfecto

Watch monitorea los datos definidos por ref.

1.tipo de datos básicos de datos de referencia

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

2. Los datos de referencia son un tipo de objeto y lo que se monitorea es el valor de la dirección del objeto. Si desea monitorear los cambios en los valores de atributos internos del objeto, debe habilitar manualmente el monitoreo en profundidad.

 let person=ref（{
    
    name：’张三’,age:22}）

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

3. Supervise los datos del tipo de objeto definidos por reactiva y la supervisión en profundidad está habilitada de forma predeterminada.

![](https://img-blog.csdnimg.cn/direct/d571da5fe2a64da0ad6550db3b6197a3.png#pic_center

watch(person,(new,old)=>{ console.log('los datos de la persona han cambiado', new, old)//Los datos nuevos y antiguos impresos son los mismos, porque la dirección no ha cambiado })

4. Escuche un determinado atributo en el objeto reactivo, y el atributo es un tipo de datos básico y debe escribirse en una 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}）

Resumen: Lo que se monitorea son los atributos en el objeto, por lo que es mejor escribir expresiones funcionales. Nota: Si el objeto monitorea el valor de la dirección, debe prestar atención al interior del objeto y debe habilitarlo manualmente en -monitoreo de profundidad.

5. Monitorear múltiples formularios de matriz de datos

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

watchEffect monitorea los datos

watchEffect(()=>{
    
    
If(temp.value>=60||height.value>=80){
    
    
  Console.log(‘已达标’)
}
})