vue3 watch和watchEffect

Часы отслеживают данные, определенные ссылкой

1.ref data базовый тип данных

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

2. Реф-данные представляют собой тип объекта, а отслеживается значение адреса объекта. Если вы хотите отслеживать изменения значений внутренних атрибутов объекта, вам необходимо вручную включить углубленный мониторинг.

Вставьте сюда описание изображения

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

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

3. Отслеживайте данные типа объекта, определенные реактивным, а углубленный мониторинг включен по умолчанию.

![](https://img-blog.csdnimg.cn/direct/d571da5fe2a64da0ad6550db3b6197a3.png#pic_centerВставьте сюда описание изображения

watch(person,(new,old)=>{ console.log('данные о человеке изменились', new, old)//Напечатанные новые и старые данные — это одни и те же данные, поскольку адрес не изменился })

4. Прослушайте определенный атрибут в реактивном объекте, а атрибут является базовым типом данных и должен быть записан в функциональной форме.

Вставьте сюда описание изображения
Вставьте сюда описание изображения

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}

Резюме: Контролируются атрибуты объекта, поэтому лучше всего писать функциональные выражения. Примечание: Если объект отслеживает значение адреса, вам необходимо обратить внимание на внутреннюю часть объекта, и вам необходимо вручную включить его. - мониторинг глубины.

5. Мониторинг нескольких форм массива данных

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

watchEffect отслеживает данные

Вставьте сюда описание изображения

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

рекомендация

отblog.csdn.net/lxuanz/article/details/135976528