Der Unterschied zwischen der von vue 3.0 verwendeten Kompositions-API und der von vue 2.0 verwendeten Option-API

Mit Vue 3.0 wurde die Composition API eingeführt, die sich etwas von der von Vue 2.x verwendeten Options-API unterscheidet. Das Ziel der Composition API besteht darin, die Wiederverwendbarkeit und Zusammensetzbarkeit von Code zu verbessern und ihn so einfacher zu warten und zu verstehen. Hier sind einige Unterschiede zwischen der Composition API und der Options API:

1. So organisieren Sie Ihren Code:

   • Options-API: Fügen Sie alle relevanten Optionen in einem Objekt zusammen, z. B. Daten, Methoden, berechnet usw. Der Code kann leicht aufgebläht werden und die Logik ist schwer zu verfolgen.
   • Kompositions-API: Organisiert die Logik nach Funktion, und jede Funktion kann unabhängig verwendet werden, wodurch der Code klarer, modularer und wartbarer wird.

2. Datenreaktivität:

   • Options-API: Verwenden Sie Datenoptionen, um reaktionsfähige Daten zu definieren.
   • Kompositions-API: Verwenden Sie reactiveFunktionen, um reaktive Daten zu erstellen und refgewöhnliche Werte in reaktive Daten umzuwandeln.

3. Lebenszyklus-Hooks:

   • Options-API: Verwenden Sie verschiedene Lebenszyklus-Hook-Funktionen, um den Komponentenlebenszyklus zu steuern.
   • Kompositions-API: Ersetzen Sie Lebenszyklus-Hooks durch Funktionen wie onMountedusw.onUpdated

4. Verfolgen Sie Abhängigkeiten und Nebenwirkungen:

   • Options-API: Verfolgen Sie Abhängigkeiten und Nebenwirkungen über computedund- watchFunktionen.
   • Kompositions-API: Erzielen Sie ähnliche Funktionen durch ref, computedund -Funktionen.watch

Hier ist ein Beispiel, das zeigt, wie die Composition API und die Options API verwendet werden, um dieselbe Funktionalität zu erreichen:

Verwenden der Options-API:

<template>
  <div>
    <button @click="increaseCount">Increase Count</button>
    <p>{
   
   { count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increaseCount() {
      this.count++;
    }
  }
};
</script>

Verwendung der Kompositions-API:

<template>
  <div>
    <button @click="increaseCount">Increase Count</button>
    <p>{
   
   { count }}</p>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0
    });

    function increaseCount() {
      state.count++;
    }

    return {
      count: state.count,
      increaseCount
    };
  }
};
</script>

Im obigen Beispiel packt die Options-API alles in ein Objekt, während die Composition-API die Logik nach Funktionalität organisiert, was das Verständnis und die Wartung erleichtert.