vue3 watch und watchEffect

Watch überwacht die durch ref definierten Daten

1.Ref-Datenbasisdatentyp

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

2. Die Referenzdaten sind ein Objekttyp, und was überwacht wird, ist der Adresswert des Objekts. Wenn Sie die Änderungen in den internen Attributwerten des Objekts überwachen möchten, müssen Sie die detaillierte Überwachung manuell aktivieren.

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

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

3. Überwachen Sie die durch Reaktiv definierten Objekttypdaten. Die detaillierte Überwachung ist standardmäßig aktiviert

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

watch(person,(new,old)=>{ console.log('Personendaten haben sich geändert', neu, alt)//Die gedruckten neuen und alten Daten sind dieselben, da sich die Adresse nicht geändert hat })

4. Hören Sie auf ein bestimmtes Attribut im reaktiven Objekt. Das Attribut ist ein grundlegender Datentyp und muss in eine funktionale Form geschrieben werden

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}）

Zusammenfassung: Was überwacht wird, sind die Attribute im Objekt, daher ist es am besten, funktionale Ausdrücke zu schreiben. Hinweis: Wenn das Objekt den Adresswert überwacht, müssen Sie auf das Innere des Objekts achten und es manuell aktivieren -Tiefenüberwachung.

5. Überwachen Sie mehrere Datenarray-Formulare

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

watchEffect überwacht Daten

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