So verwenden Sie die Uhr unter vue3

Da es sich um eine Datenüberwachung handelt, werden nur deren Änderungen überwacht. Dann müssen Sie in der Lage sein, die Änderungen zu erfassen, daher müssen die überwachten Daten reaktionsfähige Daten sein.

watch(WatcherSource, Callback, [WatchOptions])
Parameter:
WatcherSource: die reaktionsfähigen Daten, die Sie überwachen möchten.
Callback: Auszuführende Callback-Funktion, Eingabeparameter (newValue, oldValue).
[WatchOptions]: Deep, Immediate und Flush sind optional.

Für die Parameterkonfiguration von WatchOptions:

deep: Wenn eine umfassende Überwachung von Referenztypdaten wie Objekten erforderlich ist, legen Sie deep: true fest, und der Standardwert ist false.
immediate: Standardmäßig ist die Uhr verzögert. Wenn „immediate: true“ festgelegt ist, führt die Uhr die Rückruffunktion sofort nach der Initialisierung aus.
flush: Steuern Sie den Ausführungszeitpunkt der Rückruffunktion. Es kann auf „Pre“, „Post“ oder „Sync“ eingestellt werden.
Vorher: Standardwert. Wenn sich der überwachte Wert ändert, wird zuerst die Rückruffunktion ausgeführt (ausgeführt, bevor das DOM aktualisiert wird).
Beitrag: Nachdem das DOM aktualisiert und gerendert wurde, wird die Rückruffunktion ausgeführt.
sync: Sobald sich der überwachte Wert ändert, wird die Callback-Funktion synchron ausgeführt (es wird empfohlen, sie sparsam zu verwenden).

Zunächst kann durch die Überwachung einer einzelnen Datenreferenz

const count = ref(1);
watch(count, (newValue, oldValue) => {
  console.log('值发生了变更', newValue, oldValue);
});

der neue und der alte Wert ermittelt werden.

Zweitens, Referenztyp-Datenreferenz überwachen: Tiefenüberwachung

const count = ref({
  a: 1,
  b: 2
});
const handleClick = function () {
 count.value.a = 5;
};
watch(count, (newValue, oldValue) => {
  console.log('值发生了变更', newValue, oldValue);
});

Auch wenn das gesamte Array als Referenzdatentyp überwacht wird, werden Änderungen an einem seiner internen Elemente nicht beobachtet. Der Code in der Uhr wird also nicht ausgeführt.

1, der Referenztyp ref führt direkt eine Tiefenüberwachung durch

Zu diesem Zeitpunkt müssen Sie eine Tiefenüberwachung verwenden: deep:true

const count = ref({
  a: 1,
  b: 2
});
const handleClick = function () {
  count.value.a = 5;
};
watch(
  count,
  (newValue, oldValue) => {
    console.log('值发生了变更', newValue, oldValue);
  },
  { deep: true }
);

Der Wert hat sich geändert Proxy {a: 5, b: 2} Proxy {a: 5, b: 2}

Es ist zu beachten, dass für eine umfassende Überwachung der Referenzdatentyp selbst und nicht seine Attribute erforderlich sind. Außerdem kann er nur den neuen Wert erhalten, nicht jedoch den alten Wert.

2. Referenztyp-Ref-Deep-Copy und Deep-Monitoring

const count = ref({
  a: 1,
  b: 2
});
const handleClick = function () {
  count.value.a = 5;
};
watch(
  () => {
    return { ...count.value };
  },
  (newValue, oldValue) => {
    console.log('值发生了变更', newValue, oldValue);
  },
  { deep: true }
);

Auf diese Weise wird die Referenztyp-Datenquelle der Uhr tief kopiert, um die Erfassung der alten und neuen Werte abzuschließen:

Der Wert hat sich geändert {a: 5, b: 2 } {a: 1, b: 2}

Drei, einzelne Daten überwachen: reaktiv

const single = reactive({ count: 1, test: 2 });
const handleClick = function () {
  single.count++;
};
watch(
  () => single.count,
  (newValue, oldValue) => {
    console.log('值发生了变更', newValue, oldValue);
  },
  { immediate: true }
);

Die Hauptsache hier ist () => single.count, was überwacht wird, ist die Anzahl in Single, Nur wenn sich dieses Attribut ändert, wird die Rückruffunktion ausgelöst. In diesem Fall ist es möglich, die alten und neuen Werte zu erhalten.

Viertens: Referenztypdaten überwachen: reaktiv

<template>
  <div class="mine-box">
    <div ref="countDom">{{ single.count }}</div>
    <button @click="handleClick">按钮</button>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from &#39;vue&#39;;
const single = reactive({ count: 1, test: { a: 1, b: 2 } });
const handleClick = function () {
  single.test.a++;
};
watch(
  single,
  (newValue, oldValue) => {
    console.log(&#39;值发生了变更&#39;, newValue, oldValue);
  },
  { immediate: true }
);
</script>

reaktive Daten, unabhängig davon, ob Deep: True verwendet wird oder nicht, hat keine Auswirkung. Wenn sich ein Attribut einzeln ändert, kann es überwacht werden, und dann wird die Rückruffunktion ausgeführt.

Der Unterschied zu Nr. 3 besteht darin, dass in diesem Fall nur neue Werte ermittelt werden können.

Fünftens, sofort: wahr

Standardmäßig ist die Uhr faul. Wenn wir sie festlegen, führt die Uhr die Rückruffunktion sofort nach der Initialisierung aus.

const count = ref(1);
const handleClick = function () {
  count.value++;
};
watch(
  count,
  (newValue, oldValue) => {
    console.log('值发生了变更', newValue, oldValue);
  },
  { deep: true, immediate: true }
);

Sechstens: Überwachen Sie mehrere Datenquellen immediate: true

const count = ref(1);
const double = ref(2);
const handleClick = function () {
  count.value++;
  double.value++;
};
watch(
  [count, double],
  (newValue, oldValue) => {
    console.log('值发生了变更', newValue, oldValue);
  },
  { deep: true, immediate: true }
);

Wenn sich zwei Werte gleichzeitig ändern, wird die Watch-Callback-Funktion nur einmal ausgelöst, und die Watch-Callback-Funktion wird bei jeder Wertänderung ausgelöst.

Wenn Sie beim Ändern einer Datenzelle einen Rückruf auslösen möchten, können Sie nextTick zwischen den beiden Datenänderungen hinzufügen.

Sieben, Flush-Konfiguration

1. Standardmäßig wird die Callback-Funktion aufgerufen, bevor das DOM-Rendering abgeschlossen ist.

Die Callback-Funktion hat Vorrang vor der DOM-Aktualisierungsausführung. Dies bedeutet, dass ein Fehler gemeldet wird, wenn in der Rückruffunktion eine DOM-bezogene Operation vorhanden ist und im Parameter „immediate: true“ konfiguriert ist, da das DOM zu diesem Zeitpunkt noch nicht gerendert wurde und das DOM nicht abgerufen werden kann.

Schauen wir uns als nächstes den Code an:

<template>
  <div class="mine-box">
    <div ref="countDom">{{ count }}</div>
    <button @click="handleClick">按钮</button>
  </div>
</template>

<script setup>
import { ref, watch } from &#39;vue&#39;;
const count = ref(1);
const countDom = ref(null);
const handleClick = function () {
  count.value++;
};
watch(
  count,
  (newValue, oldValue) => {
    console.log(&#39;---&#39;, countDom.value.textContent);
    console.log(&#39;值发生了变更&#39;, newValue, oldValue);
  },
  { deep: true }
);
</script>

Das erhaltene Ergebnis:

---Der Wert von 1 hat sich um 2 1 geändert

In der Rückruffunktion ist der neue Wert zu 2 geworden, aber das DOM wurde immer noch erhalten das gleiche wie vorher. Standardmäßig ist der Flush-Wert pre. Wenn sich der Wert ändert, wird die Rückruffunktion ausgelöst, bevor das DOM aktualisiert wird.

2, blush: 'post’Das Ergebnis der Ausführung der Callback-Funktion

<template>
  <div class="mine-box">
    <div ref="countDom">{{ count }}</div>
    <button @click="handleClick">按钮</button>
  </div>
</template>

<script setup>
import { ref, watch } from &#39;vue&#39;;
const count = ref(1);
const countDom = ref(null);
const handleClick = function () {
  count.value++;
};
watch(
  count,
  (newValue, oldValue) => {
    console.log(&#39;---&#39;, countDom.value.textContent);
    console.log(&#39;值发生了变更&#39;, newValue, oldValue);
  },
  { deep: true, flush: &#39;post&#39; }
);
</script>

, nachdem der Dom gerendert wurde:

--- 2 Der Wert hat sich geändert 2 1

Wenn die Callback-Funktion aufgerufen wird, wird der DOM wurde aktualisiert Abgeschlossen. Das zu diesem Zeitpunkt erhaltene DOM ist das DOM, das nach Datenänderungen aktualisiert wurde.

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