vue3 watch和watchEffect

Watch は ref で定義されたデータを監視します

1.refデータの基本データ型

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('person データが変更されました', 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