Keine Verwendung der Optionen-API in Vue

Vue 3 wurde ein neuer Ansatz zur Erstellung von Komponenten eingeführt, der Zusammensetzung API. Es ist eine Alternative zum Optionen API. Die Kompositions-API ist völlig optional und Sie brauchen sie nicht zu verwenden, wenn Sie die Vue 3. Sie führt jedoch einige wichtige Verbesserungen ein, die Ihnen die Arbeit erleichtern und die Lesbarkeit des Dokuments verbessern. Code.

Vorteile der Kompositions-API gegenüber der Options-API

1. Bessere Organisation und Lesbarkeit des Codes.

Die Composition API führt eine neue Methode namens Einrichtung. Darin können Sie alle notwendigen Elemente der Komponente erstellen, wie z. B.: Daten, Methoden, berechnete Eigenschaften, Beobachter. Dadurch können Sie den Code sauber halten, indem Sie die Logik, die für eine bestimmte Funktion verantwortlich ist, an einer Stelle platzieren. Im Gegensatz dazu war die Options-API gezwungen, die Logik über die gesamte Datei zu verstreuen. Dies führte dazu, dass der Code nicht mehr lesbar war und ein Scrollen erforderlich machte. In der Composition-API müssen Methoden, Watcher usw. nicht mehr nach Typ gruppiert werden, sondern können nach eigenem Ermessen angeordnet werden.

2. Herausnehmen und Wiederverwenden von Logik.

Mit der Composition API können Sie überall reaktiven Code schreiben. Sie können einige reaktive Logik außerhalb der Komponente ziehen. Diese Art von Code wird als Verbrauchsmaterialien. Composables können in viele Komponenten importiert werden und ermöglichen es Ihnen, einige Logik zu kapseln und die notwendigen reaktiven Elemente freizulegen.

// shopping-list.js
import ( computed ) from "vue";

export function useShoppingList(listId) (
  const products = shoppingList.getAllProducts(listId);
  const productsCount = errechnet(() => products.value.length);
  const deleteProduct = (productId) => shoppingList.deleteProduct(productId);

  return (
    products,
    productsCount,
    deleteProduct,
  );
)

// Komponente
importiere useSpoppingList aus "@/composables/shopping-list.js";
export default (
  setup() (
    const ( products, productsCount, deleteProduct ) = useSpoppingList();
    return ( products, productsCount, deleteProduct );
  ),
);

3. Einfache Verwendung von Konstanten und externen Ressourcen in der Komponente.

In der Options-API müssen Sie, um z. B. eine statische Liste von Elementen hinzuzufügen, die aus einer anderen Datei importiert wurden, diese zu data() hinzufügen (was sich negativ auf die Leistung auswirkt) oder sie zu diese in erstellt(). Beide Wege sind nicht sehr elegant. Die Kompositions-API und das neue Einrichtung Methode zu Hilfe, mit der Sie nicht nur reaktive Dinge, sondern auch Konstanten und externe Abhängigkeiten exportieren können.

importiere Liste aus "./list.json";
export default (
  setup() (
    return ( list );
  ),
);

4. Sie können sogar die Kompositions-API in Vue 2 verwenden.

Dank der offiziellen @vue/composition-api Plugin können Sie die Composition API in Vue 2 auch.

Wie verwendet man die neue Composition API?

<h3>Setup-Methode</h3>

setup() ist eine neue Methode, die in Vue 3 wo Sie alle notwendigen Elemente wie Datenobjekte, Methoden usw. einfügen können. Von dort aus können Sie die Elemente zurückgeben, die Sie in die Vorlage aufnehmen möchten.

<template>
  <div>(( count ))</div>
</template>

import ( ref ) von "vue";
export default (
  setup() (
    const count = ref(10);
    return ( count );
  ),
);

reaktiv()

Um ein reaktives Objekt oder Array zu erstellen, müssen Sie es mit der reaktiv(StandardWert) Methode. Sie können den Anfangswert dieses Objekts über ein Methodenargument übergeben. Die Methode gibt ein Proxy für dieses Objekt, wenn Sie also Änderungen daran vornehmen, Vue kennt sie und kann die Ansicht entsprechend aktualisieren.

Zusammensetzung API

import ( reactive ) from "vue";
export default (
  setup() (
    const user = reactive((
      name: "John",
      Rolle: "ADMIN",
    ));
    return ( user );
  ),
);

Optionen API

Standard exportieren (
  data() (
    return (
      Benutzer: (
        name: "John",
        Rolle: "ADMIN",
      ),
    );
  ),
);

Reactive nur funktioniert für Objekttypen (Objekte, Arrays und Sammlungstypen wie Karte und Einstellung). Er kann keine primitiven Typen enthalten, wie z. B. String, Nummer oder boolean. Vue führt also auch ein ref().

ref()

Um primitiven Elementen Reaktivität zu verleihen, müssen Sie sie mit ref().

Zusammensetzung API

import ( ref ) von "vue";
export default (
  setup() (
    const count = ref(10);
    return ( count );
  ),
);

Optionen API

Standard exportieren (
  data() (
    return (
      Anzahl: 10,
    );
  ),
);

Ändern von reaktiven Objekten

Sie können Werte in Objekten direkt in der reaktiven Methode ändern, aber um primitive Werte zu ändern, müssen Sie die .wert Feld.

import ( ref, reactive ) from "vue";
export default (
  setup() (
    const user = reactive((
      Name: "John",
    ));
    user.name = "John Doe"; // Wertänderung

    const count = ref(10);
    count.value = 20; // Wertänderung

    zurückgeben (
      user,
      count,
    );
  ),
);

Sie nicht müssen die .wert Eigenschaft in der Vorlage.

<div>(( count ))</div>

Berechnete Eigenschaften

Berechnete Eigenschaften können einfach erstellt werden, indem man eine Methode als Parameter an die importierte berechnet() Methode.

import ( reactive, computed ) from "vue";
export default (
  setup() (
    const list = reactive([
      "Element 1",
      "Element 2",
    ]);

    // Berechnet
    const isEmpty = berechnet(() => list.length === 0);

    return (
      list,
      isEmpty,
    );
  ),
);

Methoden

Sie können auch Methoden in der Einrichtung Methode.

Zusammensetzung API

import ( ref ) von "vue";
export default (
  setup() (
    const count = ref(10);

        // Methode
    const increment = () => (
      count.value++;
    );

    return (
      count,
      Inkrement,
    );
  ),
);

Beobachter

Beobachter werden auf ähnliche Weise erstellt wie berechnet. Denken Sie jedoch daran, die Proxy Objektd.h. Namewie im folgenden Beispiel, nicht die Name.Wert Wert selbst.

import ( watch, ref ) from "vue";
export default (
  setup() (
    const name = ref("John");
        // Beobachter
    watch(name, (currentValue, oldValue) => (
      console.log(`Wert geändert von $(oldValue)auf $(currentValue)`);
    ));
    return ( name );
  ),
);

Zusammenfassung

In diesem Artikel habe ich Ihnen nur die Grundlagen der Composition-API erläutert, damit Sie ein allgemeines Verständnis dafür haben, wie sie sich von der Options-API unterscheidet und welche Vorteile sie im Vergleich zu dieser hat. Die Composition-API bietet auch Alternativen zu den übrigen Elementen der Komponente, wie z. B. Häkchenund führt neue Methoden ein, wie z. B. watchEffect. Es ist eine gute Idee, sie in der offiziellen Vue 3 Dokumentation.