In Vue 3 der Unterschied zwischen watch und watchEffect

Fazit zunächst:

Sowohl watch als auch watchEffect sind Listener, mit denen Änderungen in reaktionsfähigen Daten überwacht und entsprechende Vorgänge ausgeführt werden. Der Unterschied ist:

beobachten: Sie müssen die zu überwachenden Daten angeben. Die Vorher- und Nachherwerte der Attributänderungen können in der Rückruffunktion abgerufen werden.

Geeignet für Situationen, in denen eine präzise Kontrolle des Überwachungsumfangs erforderlich ist, d. h. Aktionen müssen bei bestimmten Datenänderungen durchgeführt werden.

watchEffect: Es ist nicht erforderlich, anzugeben, welche Eigenschaft überwacht werden soll. Welche Reaktionsdaten im Rückruf verwendet werden und welche überwacht werden.

Es eignet sich für Szenarien, in denen die zu überwachenden Daten nicht klar definiert werden müssen, sondern nur die reaktiven Daten innerhalb der Rückruffunktion verwendet und die entsprechenden Vorgänge ausgeführt werden können. Dabei handelt es sich um Vorgänge, die lediglich anhand von Datenänderungen automatisch nachverfolgt werden müssen.

watchEffect ist ein bisschen wie eine berechnete Eigenschaft: Die berechnete Eigenschaft muss jedoch den Rückgabewert schreiben, während watchEffect dem Prozess (dem Funktionskörper der Rückruffunktion) mehr Aufmerksamkeit schenkt , sodass kein Bedarf besteht, den Rückgabewert zu schreiben.

Darüber hinaus wird berechnet nicht aufgerufen, wenn der Wert nicht verwendet wird, watchEffect wird jedoch immer einmal aufgerufen.

Spezifische Analyse:

Sowohl watch als auch watchEffect sind Zuhörer (Listener) . Wird verwendet, um Änderungen in reaktionsfähigen Daten zu überwachen und entsprechende Vorgänge auszuführen

1、beobachten

Wird verwendet, um bestimmte Reaktionsdaten zu überwachen und entsprechende Vorgänge durchzuführen, wenn sich die Daten ändern.

Sie müssen die zu überwachenden Daten explizit angeben und eine Rückruffunktion bereitstellen, um auf Datenänderungen zu reagieren.

Neben der Überwachung einfacher Datenänderungen können Sie auch komplexere Überwachungsanforderungen bewältigen , z. B. Änderungen in verschachtelten Objekten oder Arrays überwachen und entsprechende Vorgänge ausführen.

Hat eine gewisse Trägheit. Es wird nicht ausgeführt, wenn die Seite zum ersten Mal angezeigt wird, sondern nur, wenn sich die Daten ändern (es kann nicht verzögert werden, wenn „ immediate : true“ festgelegt wird, und es wird ausgeführt, wenn die Seite geladen wird erstes Mal)

Es akzeptiert 3 Parameter:

Eine reaktive Referenzreferenz oder eine Getter-Funktion, die einen Wert zurückgibt

ein Rückruf

Optionale Konfigurationsmöglichkeiten

① watch hört auf eine einzelne Datenquelle

import { ref, watch } from 'vue'

const counter = ref(0)
watch(counter, (newValue, oldValue) => {
  console.log('The new counter value is: ' + counter.value)
})

Auf praktische Beispiele angewendet:

// src/components/UserRepositories.vue `setup` function
import { fetchUserRepositories } from '@/api/repositories'
import { ref, onMounted, watch, toRefs } from 'vue'

export default {
  components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
  props: {
    user: {
      type: String,
      required: true
    }
  },
  // 在我们组件中
  setup (props) {
     // 使用 `toRefs` 创建对prop的 `user` property 的响应式引用
    const { user } = toRefs(props)

    const repositories = ref([])
    const getUserRepositories = async () => {
      // 更新 `prop.user` 到 `user.value` 访问引用值
      repositories.value = await fetchUserRepositories(user.value)
    }

    onMounted(getUserRepositories)

    // 在用户 prop 的响应式引用上设置一个侦听器
    watch(user, getUserRepositories)

    return {
      repositories,
      getUserRepositories
    }
 }
},

Wird auf unserem setup verwendet toRefs. Dadurch soll sichergestellt werden, dass unsere Zuhörer user auf Änderungen an den Requisiten reagieren können .

② watch hört auf mehrere Datenquellen

Der erste Parameter wird als Array übergeben und das vom zweiten Parameter-Callback zurückgegebene Ergebnis ist ebenfalls ein Array.

watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
  /* ... */
})

Der in Vue3 reaktiv überwachte Wert muss in Form einer Getter-Funktion vorliegen , andernfalls wird ein Fehler gemeldet. Der Unterschied zu Vue2 besteht darin, dass das Deep-Attribut nicht geschrieben werden muss und die Standardeinstellung Deep Monitoring ist.

    watch([result2, () => data.title], (newV, oldV) => {
      console.log(newV, oldV) //  [20, "111"] [20, "222"]
    })

Beim Abhören mehrerer Werte in reaktiv:

    watch([result2, () => [data.title, data.value1]], (newV, oldV) => {
      console.log(newV, oldV)
    })

2、watchEffect

Führt eine übergebene Funktion sofort aus, verfolgt reaktiv ihre Abhängigkeiten und führt die Funktion erneut aus, wenn sich ihre Abhängigkeiten ändern.

Wird verwendet, um einen reaktiven Nebeneffekt zu erzeugen, der seine Abhängigkeiten automatisch verfolgt und automatisch ausgeführt wird, wenn sich Abhängigkeiten ändern .

Es besteht keine Notwendigkeit, die zu überwachenden Daten explizit anzugeben, aber Abhängigkeiten werden automatisch basierend auf den reaktiven Daten hergestellt, die innerhalb der Callback-Funktion verwendet werden.

Es eignet sich für Szenarien, in denen die zu überwachenden Daten nicht explizit definiert werden müssen und Sie nur reaktive Daten verwenden und entsprechende Vorgänge innerhalb der Rückruffunktion ausführen müssen.

Sofort ausführen , keine Faulheit, es wird ausgeführt, wenn die Seite zum ersten Mal geladen wird

Der ursprüngliche Wert kann nicht erhalten werden, nur der geänderte Wert kann erhalten werden

<template>
  <div>
    <h1>watchEffect - 侦听器</h1>
    <p>{
   
   {data.count}}</p>
    <button @click="stop">手动关闭侦听器</button>
  </div>
</template>

<script>
import { reactive, watchEffect } from "vue";
export default {
  name: "WatchEffect",
  setup() {
    const data = reactive({ count: 1 });
    const stop = watchEffect(() => console.log(`侦听器：${data.count}`));
    setInterval(() => {
      data.count++;
    }, 1000);
    return { data, stop };
  }
};
</script>

Ergebnis:

3. Zusammenfassung

watch: Es ist notwendig, sowohl die zu überwachenden Eigenschaften als auch den Callback anzugeben.

watchEffect: Es ist nicht erforderlich, anzugeben, welche Eigenschaft überwacht werden soll. Welche Eigenschaft im Rückruf verwendet wird und welche Eigenschaft überwacht werden soll.

watchEffect ist ein bisschen wie eine berechnete Eigenschaft:

Die Berechnung konzentriert sich jedoch auf den berechneten Wert (den Rückgabewert der Rückruffunktion), daher muss der Rückgabewert geschrieben werden.

WatchEffect schenkt dem Prozess (dem Funktionskörper der Rückruffunktion) mehr Aufmerksamkeit, sodass kein Rückgabewert geschrieben werden muss.

Der Vergleich mit watchEffectwatch ermöglicht uns:

Faule Ausführung von Nebenwirkungen;

Geben Sie genauer an, welcher Zustand den Listener zur erneuten Ausführung veranlassen soll.

Greifen Sie auf die Werte vor und nach Änderungen des Abhörstatus zu.