Umfassender Vue-Upgrade-Leitfaden: Ausführliche Erkundung der Composition API

• Kernkonzepte und Funktionen der Composition API
  • setup()-Funktion:
  • ref und reaktiv:
  • Berechnete Eigenschaften und Listener:
  • Kompositionsfunktionen
  • Lebenszyklus-Hooks:
• Kompositions-API-Schreibkomponenten
• Migrieren Sie von der Options-API zur Composition-API
  • Komponentenstruktur
  • Abhängigkeitsinjektion
  • Vorlagen-Refactoring

Das umfassende Upgrade von Vue 3.x führt die Composition API ein, die eine wesentliche Verbesserung gegenüber der traditionellen Options-API von Vue 2.x darstellt. Es bietet eine flexiblere und modularere Möglichkeit, Code zu organisieren.

Kernkonzepte und Funktionen der Composition API

setup()-Funktion:

Der Kerneinstiegspunkt in Vue 3, der zum Festlegen des Status und der Logik der Komponente verwendet wird und nach dem BeforeCreate-Hook und vor dem Create-Hook ausgeführt wird. Es ersetzt den ursprünglich in Optionen wie Daten und Methoden definierten Inhalt.

import { ref, computed } from "vue";

export default {
  setup() {
    // Responsive Data
    const count = ref(0);

    // Computed properties
    const doubleCount = computed(() => count.value * 2);

    // 方法
    function increment() {
      count.value++;
    }

    // Returns the data and methods needed to be used in the template
    return {
      count,
      doubleCount,
      increment,
    };
  },
};

ref und reaktiv:

Wird zum Erstellen reaktionsfähiger Daten verwendet, ref wird zum Erstellen reaktionsfähiger Daten grundlegender Typen verwendet und reaktiv wird für reaktionsfähige Proxys von Objekten und Arrays verwendet.

import { ref, reactive } from "vue";

export default {
  setup() {
    // Creating Responsive Primitives Using ref
    const count = ref(0);

    // Creating responsive objects using reactive
    const user = reactive({
      name: "Alice",
      age: 30,
    });

    // Modifying Responsive Data
    count.value++;
    user.age++;

    return { count, user };
  },
};

Berechnete Eigenschaften und Listener:

berechnet wird verwendet, um berechnete Eigenschaften zu erstellen, die nur dann neu berechnet werden, wenn sich Abhängigkeiten ändern.

import { ref, computed } from "vue";

export default {
  setup() {
    const firstName = ref("John");
    const lastName = ref("Doe");

    // Calculate full name
    const fullName = computed(() => `${firstName.value} ${lastName.value}`);

    return { firstName, lastName, fullName };
  },
};

watch wird verwendet, um Änderungen in reaktionsfähigen Daten zu beobachten und Rückrufe auszuführen, wenn Änderungen auftreten.

import { ref, watch } from "vue";

export default {
  setup() {
    const count = ref(0);

    // Observe the change of count
    watch(count, (newVal, oldVal) => {
      console.log(`count changed from ${oldVal} to ${newVal}`);
    });

    function increment() {
      count.value++;
    }

    return { count, increment };
  },
};

Kompositionsfunktionen

Die Kompositions-API fördert die Erstellung wiederverwendbarer Kompositionsfunktionen.

// useCounter.js
export function useCounter(initialValue = 0) {
  const count = ref(initialValue);
  function increment() {
    count.value++;
  }
  return { count, increment };
}

// Use in components
import { useCounter } from "./useCounter";

export default {
  setup() {
    const { count, increment } = useCounter(10);
    return { count, increment };
  },
};

Lebenszyklus-Hooks:

Lifecycle-Hooks in Vue 3 werden nicht mehr direkt in setup() verwendet, sondern über neue Lifecycle-Hook-Funktionen wie onBeforeMount und onMounted.

1. onBeforeMount: Dieser Hook wird aufgerufen, bevor die Komponente im DOM gemountet wird. Dies ähnelt dem beforeMount-Lebenszyklus-Hook in Vue 2.x.

import { onBeforeMount } from "vue";

export default {
  setup() {
    onBeforeMount(() => {
      console.log("Component is about to be mounted");
    });
  },
};

2. onMounted: Wird sofort aufgerufen, nachdem die Komponente im DOM gemountet wurde. Entspricht der Montage in Vue 2.x.

import { onMounted } from "vue";

export default {
  setup() {
    onMounted(() => {
      console.log("Component mounted");
    });
  },
};

3. onBeforeUpdate: Wird aufgerufen, bevor die Komponentendaten aktualisiert werden, aber bevor die DOM-Aktualisierung beginnt. Ähnlich wie vor dem Update von Vue 2.x.

import { onBeforeUpdate } from "vue";

export default {
  setup() {
    let previousData;
    onBeforeUpdate(() => {
      console.log("Before data update:", previousData);
    });

    return { data };
  },
};

4. onUpdated: Wird aufgerufen, nachdem die durch Komponentendatenänderungen verursachte DOM-Aktualisierung abgeschlossen ist. Entspricht der Aktualisierung in Vue 2.x.

import { onUpdated } from "vue";

export default {
  setup() {
    onUpdated(() => {
      console.log("Component update completed");
    });
  },
};

5. onBeforeUnmount: Wird aufgerufen, bevor die Komponente deinstalliert wird. Ähnlich wie beforeDestroy in Vue 2.x.

import { ref, computed } from "vue";

export default {
  setup() {
    // Responsive Data
    const count = ref(0);

    // Computed properties
    const doubleCount = computed(() => count.value * 2);

    // 方法
    function increment() {
      count.value++;
    }

    // Returns the data and methods needed to be used in the template
    return {
      count,
      doubleCount,
      increment,
    };
  },
};

6. onUnmount: Wird aufgerufen, nachdem die Komponente deinstalliert wurde. Entspricht zerstört in Vue 2.x.

import { ref, reactive } from "vue";

export default {
  setup() {
    // Creating Responsive Primitives Using ref
    const count = ref(0);

    // Creating responsive objects using reactive
    const user = reactive({
      name: "Alice",
      age: 30,
    });

    // Modifying Responsive Data
    count.value++;
    user.age++;

    return { count, user };
  },
};

7. onActivated: Wird nur aufgerufen, wenn die Komponente mit umschlossen ist. ist aktiviert.

import { ref, computed } from "vue";

export default {
  setup() {
    const firstName = ref("John");
    const lastName = ref("Doe");

    // Calculate full name
    const fullName = computed(() => `${firstName.value} ${lastName.value}`);

    return { firstName, lastName, fullName };
  },
};

8. onDeactivated: Wird nur aufgerufen, wenn die Komponente mit umschlossen ist. ist deaktiviert.

import { ref, watch } from "vue";

export default {
  setup() {
    const count = ref(0);

    // Observe the change of count
    watch(count, (newVal, oldVal) => {
      console.log(`count changed from ${oldVal} to ${newVal}`);
    });

    function increment() {
      count.value++;
    }

    return { count, increment };
  },
};

Kompositions-API-Schreibkomponenten

• Responsive Daten erstellen: Verwenden Sie ref und reactive, um responsive Variablen zu erstellen.
• Berechnete Eigenschaften: Verwenden Sie berechnete Funktionen, um berechnete Eigenschaften zu erstellen.
• Responsive Funktionen: Verwenden Sie toRefs() und toRef(), um Objekteigenschaften in responsive zu konvertieren.
• Listener: Verwenden Sie watch oder watchEffect, um Datenänderungen zu überwachen.

// useCounter.js
export function useCounter(initialValue = 0) {
  const count = ref(initialValue);
  function increment() {
    count.value++;
  }
  return { count, increment };
}

// Use in components
import { useCounter } from "./useCounter";

export default {
  setup() {
    const { count, increment } = useCounter(10);
    return { count, increment };
  },
};

• Responsive Daten erstellen: Verwenden Sie reaktiv, um ein responsives Objekt zu erstellen, das cityInput, Stadt und Wetter enthält. ref kann auch für grundlegende Arten von reaktionsfähigen Daten verwendet werden, aber in diesem Szenario ist reaktiv besser für die Verwaltung mehrerer Zustände geeignet.

• Berechnete Eigenschaften: Die berechnete Eigenschaft currentCity gibt direkt den Wert von state.cityInput zurück. Obwohl es in diesem Beispiel möglicherweise intuitiver ist, v-model="cityInput" direkt zu verwenden, zeigt es, wie berechnete Eigenschaften definiert werden.

• Responsive Funktionen: Verwenden Sie toRefs, um die Eigenschaften des Statusobjekts in unabhängige responsive Referenzen für die direkte Bindung in der Vorlage umzuwandeln. Dies zeigt hauptsächlich die Verwendung reaktionsfähiger Daten und nicht die Konvertierungsfunktion selbst, da eine direkte Destrukturierungszuweisung (z. B. const { cityInput } = state;) in der Vorlage ausreichend ist.

• Zuhörer: Verwenden Sie die Uhr, um Änderungen in cityInput abzuhören und den Wetterstatus bei jeder Änderung der Eingabe zu löschen, damit er beim nächsten Mal abgefragt werden kann.

Migrieren Sie von der Options-API zur Composition-API

Komponentenstruktur

Trennung von Status, Methoden und Logik in separate Funktionen. In der Options-API definieren wir normalerweise Daten, Methoden, Berechnungen usw. in den Komponentenoptionen. In der Composition API sind diese Logiken in separate Funktionen unterteilt. Zum Beispiel:

Options-API:

import { onBeforeMount } from "vue";

export default {
  setup() {
    onBeforeMount(() => {
      console.log("Component is about to be mounted");
    });
  },
};

Kompositions-API:

import { onMounted } from "vue";

export default {
  setup() {
    onMounted(() => {
      console.log("Component mounted");
    });
  },
};

Abhängigkeitsinjektion

Bereitstellen und injizieren. In der Options-API verwenden wir „Bereitstellen“ und „Injizieren“, um Daten zu übergeben. In der Composition API bleibt dieser Prozess derselbe:

Options-API:

import { onBeforeUpdate } from "vue";

export default {
  setup() {
    let previousData;
    onBeforeUpdate(() => {
      console.log("Before data update:", previousData);
    });

    return { data };
  },
};

Kompositions-API:

import { onUpdated } from "vue";

export default {
  setup() {
    onUpdated(() => {
      console.log("Component update completed");
    });
  },
};

Vorlagen-Refactoring

Konvertieren Sie daraus gebundene Eigenschaften und Methoden in direkte Referenzen.

Das obige ist der detaillierte Inhalt vonUmfassender Vue-Upgrade-Leitfaden: Ausführliche Erkundung der Composition API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!