Heim > Web-Frontend > View.js > Hauptteil

So verwenden Sie die Uhr unter vue3

WBOY
Freigeben: 2023-05-17 12:14:26
nach vorne
2961 Leute haben es durchsucht

    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);
    });
    Nach dem Login kopieren

    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);
    });
    Nach dem Login kopieren

    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 }
    );
    Nach dem Login kopieren

    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 }
    );
    Nach dem Login kopieren

    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 }
    );
    Nach dem Login kopieren

    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>
    Nach dem Login kopieren

    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(&#39;值发生了变更&#39;, newValue, oldValue);
      },
      { deep: true, immediate: true }
    );
    Nach dem Login kopieren
    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(&#39;值发生了变更&#39;, newValue, oldValue);
      },
      { deep: true, immediate: true }
    );
    Nach dem Login kopieren
    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>
    Nach dem Login kopieren

    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>
    Nach dem Login kopieren

    , 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!

    Verwandte Etiketten:
    Quelle:yisu.com
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage
    Über uns Haftungsausschluss Sitemap
    Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!