So verwenden Sie die Uhr in Vue3

Die Watch-Funktion wird verwendet, um auf Änderungen eines bestimmten Werts zu achten. Wenn sich der Wert ändert, wird die entsprechende Verarbeitungslogik ausgelöst.

1. Basisinstanz von watch

<template>
  <div>
    <div>{{ count }}</div>
    <button @click="changCount">更改count的值</button>
  </div>
</template>
 
<script setup>
import {ref,reactive, watch} from &#39;vue&#39;
const count = ref(0)
function changCount(){
  count.value++
}
watch(count,(newValue,oldValue)=>{
  if(newValue){
    console.log(`我侦听到了count状态的变化，当前值为${newValue},从而处理相关逻辑`);
  }
})
</script>
 
<style>
 
</style>

2. Watch überwacht mehrere Daten

<template>
  <div>
    <div>{{ x }}</div>
    <button @click="changCount">更改count的值</button>
  </div>
</template>
 
<script setup>
import { ref, reactive, watch } from "vue";
const x = ref(1);
const y = ref(5);
function changCount() {
  x.value++;
}
watch(
  () => x.value + y.value,
  (sum) => {
    console.log(`我是x与y之和${sum}`);
  }
);
</script>
 
<style>
</style>

Ein Array bestehend aus mehreren Quellen

<template>
  <div>
    <div>{{ x }}</div>
    <button @click="changCount">更改count的值</button>
  </div>
</template>
 
<script setup>
import { ref, reactive, watch } from "vue";
const x = ref(1);
const y = ref(5);
function changCount() {
  x.value++;
}
watch(
  [x,y],
  ([x,y]) => {
    console.log(`我是x=>${x},我是y=》${y}`);
  }
);
</script>
 
<style>
</style>

4 Der Konfigurationsparameter

1.deep

wird verwendet, um die Tiefenüberwachung zu aktivieren.

<template>
  <div>
    <div>{{ obj.name }}</div>
    <button @click="changObj">更改count的值</button>
  </div>
</template>
 
<script setup>
import { ref, reactive, watch } from "vue";
const obj = ref({name:&#39;你好&#39;})
function changObj(){
  obj.value.name+=&#39;我不好&#39;
}
watch(()=>obj.value.name,(name)=>{
  console.log(name);
})
</script>
 
<style>
</style>

2.immediate

Gibt an, ob die Methode im Listener nur ausgeführt wird, wenn sich der Wert ändert Wird nach der Initialisierung nach sofortiger einmaliger Aktivierung ausgeführt.

<template>
  <div>
    <div>{{ obj.name }}</div>
    <button @click="changObj">更改count的值</button>
  </div>
</template>
 
<script setup>
import { ref, reactive, watch, watchEffect } from "vue";
const obj = ref({name:&#39;你好&#39;})
function changObj(){
  obj.value.name+=&#39;我不好&#39;
}
// obj是一个RefImpl对象，当不开启深度监听的时候，监听obj无法检测到obj属性的变化
watch(obj,()=>{
  console.log(obj.value.name);
}, { deep: true })
</script>
 
<style>
</style>

5. Vereinfachen Sie die Überwachung durch watchEffect()

Es ist üblich, dass Listener-Rückrufe genau denselben reaktiven Zustand wie die Quelle verwenden. Zum Beispiel:

<template>
  <div>
    <div>{{ obj.name }}</div>
    <button @click="changObj">更改count的值</button>
  </div>
</template>
 
<script setup>
import { ref, reactive, watch, watchEffect } from "vue";
const obj = ref({name:&#39;你好&#39;})
function changObj(){
  obj.value.name+=&#39;我不好&#39;
}
// obj是一个RefImpl对象，当不开启深度监听的时候，监听obj无法检测到obj属性的变化
watch(obj,()=>{
  console.log(obj.value.name);
}, { deep: true,immediate:true })
</script>
 
<style>
</style>

Wir können die watchEffect-Funktion verwenden, um den obigen Code zu vereinfachen.

Ermöglicht uns, reaktive Abhängigkeiten von Rückrufen automatisch zu verfolgen. Der obige Listener kann wie folgt umgeschrieben werden:

<template>
  <div>
    <div>{{ obj.name }}</div>
    <button @click="changObj">更改count的值</button>
  </div>
</template>
 
<script setup>
import { ref, reactive, watch, watchEffect } from "vue";
const obj = ref({name:&#39;你好&#39;})
function changObj(){
  obj.value.name+=&#39;我不好&#39;
}
watch(obj.value,()=>{
  console.log(obj.value.name);
})
</script>
 
<style>
</style>

Hinweis: Es ist zu beachten, dass der watchEffect-Rückruf sofort ausgeführt wird und keine sofortige Angabe erforderlich ist

watchEffect()6. Sowohl watch als auch watchEffect können reaktionsschnell ausgeführt werden Rückruf zu Nebenwirkungen. Der Hauptunterschied zwischen ihnen besteht in der Art und Weise, wie reaktive Abhängigkeiten verfolgt werden:

watch verfolgt nur Datenquellen, die explizit abgehört werden. Es wird nichts verfolgt, was im Rückruf aufgerufen wird. Darüber hinaus wird der Rückruf nur ausgelöst, wenn sich die Datenquelle tatsächlich ändert. watch vermeidet Tracking-Abhängigkeiten, wenn Nebenwirkungen auftreten, sodass wir genauer steuern können, wann die Rückruffunktion ausgelöst wird.

watchEffect verfolgt Abhängigkeiten beim Auftreten von Nebenwirkungen. Während der Synchronisierung werden automatisch alle zugänglichen reaktiven Eigenschaften verfolgt. Dies ist bequemer und der Code ist tendenziell sauberer, aber manchmal sind seine reaktiven Abhängigkeiten weniger explizit.
7. Callback-Auslösemechanismus und Stoppen des Listeners

• Wenn Sie im Listener-Callback auf das von Vue aktualisierte DOM zugreifen möchten, müssen Sie die Option „flush: 'post“ angeben:

  <template>
    <div>
      <div>{{ obj.name }}</div>
      <button @click="changObj">更改count的值</button>
    </div>
  </template>
   
  <script setup>
  import { ref, reactive, watch, watchEffect } from "vue";
  const obj = ref({name:&#39;你好&#39;})
  function changObj(){
    obj.value.name+=&#39;我不好&#39;
  }
  // watch(obj.value,()=>{
  //   console.log(obj.value.name);
  // })
  watchEffect(()=>{
    console.log(obj.value.name);
  })
  </script>
   
  <style>
  </style>

Hör auf zuzuhören

Listener erstellt mit synchronen Anweisungen in setup() oder 5101c0cdbdc49998c642c71f6b6410a8 werden automatisch an die Host-Komponenteninstanz gebunden und werden automatisch gestoppt, wenn die Host-Komponente deinstalliert wird. Daher müssen Sie sich in den meisten Fällen keine Sorgen darüber machen, dass ein Zuhörer gestoppt wird.

Ein wichtiger Punkt ist, dass der Listener mit einer synchronen Anweisung erstellt werden muss: Wenn Sie einen Listener mit einem asynchronen Rückruf erstellen, wird er nicht an die aktuelle Komponente gebunden und Sie müssen ihn manuell stoppen, um Speicherlecks zu verhindern. Als Beispiel unten:

watch(source, callback, {
  flush: 'post'
})
 
watchEffect(callback, {
  flush: 'post'
})

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Uhr in Vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!