vue3 watchwa watchEffet

Watch surveille les données définies par ref

1.ref dataType de données de base

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

2. Les données de référence sont un type d'objet et ce qui est surveillé est la valeur d'adresse de l'objet. Si vous souhaitez surveiller les changements dans les valeurs d'attributs internes de l'objet, vous devez activer manuellement la surveillance approfondie.

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

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

3. Surveillez les données de type d'objet définies par réactif et la surveillance approfondie est activée par défaut

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

watch(person,(new,old)=>{ console.log('person data has changes', new, old)//Les nouvelles et anciennes imprimées sont les mêmes données, car l'adresse n'a pas changé })

4. Écoutez un certain attribut dans l'objet réactif, et l'attribut est un type de données de base et doit être écrit sous une forme fonctionnelle

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

Résumé : Ce qui est surveillé, ce sont les attributs de l'objet, il est donc préférable d'écrire des expressions fonctionnelles. Remarque : Si l'objet surveille la valeur de l'adresse, vous devez faire attention à l'intérieur de l'objet et vous devez l'activer manuellement dans -surveillance de la profondeur.

5. Surveillez plusieurs formulaires de tableau de données

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

watchEffect surveille les données

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