5 VueUse-Bibliotheken, die die Entwicklung beschleunigen können (Zusammenfassung)

VueUse ist ein Open-Source-Projekt von Anthony Fu, das Vue-Entwicklern eine große Anzahl grundlegender Composition API-Dienstprogrammfunktionen für Vue 2 und Vue 3 bietet.

Es bietet Dutzende von Lösungen für gängige Anwendungsfälle für Entwickler, wie etwa das Verfolgen von Referenzänderungen, das Erkennen der Elementsichtbarkeit, das Vereinfachen gängiger Vue-Muster, Tastatur-/Maus-Eingabe und mehr. Auf diese Weise können Sie erheblich Entwicklungszeit sparen, da Sie diese Standardfunktionen nicht selbst hinzufügen müssen.

Mir gefällt die VueUse-Bibliothek, weil sie den Entwickler bei der Entscheidung, welche Dienstprogramme bereitgestellt werden, wirklich in den Mittelpunkt stellt. Außerdem handelt es sich um eine gut gepflegte Bibliothek, da sie mit der aktuellen Version von Vue synchronisiert bleibt.

Welche Dienstprogramme bietet VueUse?

Wenn Sie eine vollständige Liste aller Dienstprogramme sehen möchten, empfehle ich Ihnen unbedingt, einen Blick in die offizielle Dokumentation zu werfen. Aber um es zusammenzufassen: VueUse bietet 9 Funktionen.

• Animation – Enthält einfach zu verwendende Übergangs-, Timeout- und Timing-Funktionen
• Browser – kann für verschiedene Bildschirmsteuerungen, Zwischenablage, Einstellungen usw. verwendet werden.
• Komponente – Bietet eine Abkürzung für verschiedene Komponentenmethoden
• Formatter – Bietet Reaktionszeit-Formatierungsfunktionalität
• Sensoren – werden zur Überwachung verschiedener DOM-Ereignisse, Eingabeereignisse und Netzwerkereignisse verwendet
• Status – Benutzerstatus verwalten (global, lokaler Speicher, Sitzungsspeicher)
• Dienstprogramm – verschiedene Dienstprogrammfunktionen wie Getter, Bedingungen, Referenzsynchronisierung usw.
• Beobachten – fortgeschrittenere Beobachtertypen, wie pausierbare Beobachter, Entprellungsbeobachter und bedingte Beobachter
• Sonstiges – Ereignisse, WebSockets und verschiedene Arten von Web Worker-Funktionen

Die meisten dieser Kategorien decken mehrere unterschiedliche Funktionen ab, sodass VueUse flexibel auf Ihren Anwendungsfall zugeschnitten ist und sich hervorragend dafür eignet, schnell mit der Erstellung einer Vue-Anwendung zu beginnen.

In diesem Artikel sehen wir uns 5 verschiedene VueUse-Funktionen an, damit Sie sehen, wie einfach es ist, mit dieser Bibliothek zu arbeiten.

Aber fügen wir es zuerst zu unserem Vue-Projekt hinzu!

Installieren Sie VueUse in Ihrem Vue-Projekt

Eines der besten Features von VueUse ist, dass es mit nur einem Paket sowohl mit Vue 2 als auch mit Vue 3 kompatibel ist!

Es gibt zwei Möglichkeiten zur Installation von VueUse: npm oder CDN

npm ich @vueuse/core # Garn hinzufügen @vueuse/core

<script src="https://unpkg.com/@vueuse/shared"></script>
<script src="https://unpkg.com/@vueuse/core"></script>

Ich empfehle die Verwendung von NPM, da es einfacher zu verstehen ist. Wenn wir jedoch ein CDN verwenden, können wir in unserer Anwendung über window.VueUse auf VueUse zugreifen.

Bei NPM-Installationen kann auf alle Funktionen zugegriffen werden, indem sie über @vueuse/core mithilfe der Standardobjektdestrukturierung wie folgt importiert werden:

// Beispiel für den Import aus VueUse import { useRefHistory } von '@vueuse/core'

OK Nachdem wir VueUse installiert haben, verwenden wir es in unserer Anwendung.

1. useRefHistory, um Änderungen in responsiven Daten zu verfolgen

useRefHistory verfolgt jede an einem Verweis vorgenommene Änderung und speichert sie in einem Array. Auf diese Weise können wir unseren Anwendungen problemlos Rückgängig- und Wiederherstellen-Funktionen bereitstellen.

Sehen wir uns ein Beispiel an, bei dem wir einen Textbereich erstellen, den wir rückgängig machen können möchten.

Der erste Schritt besteht darin, unsere Basiskomponente ohne VueUse zu erstellen – mithilfe eines Verweises, eines Textbereichs und Schaltflächen zum Rückgängigmachen und Wiederherstellen.

<Vorlage>
  <p> 
    <button> Rückgängig machen </button>
    <button> Wiederholen </button>
  </p>
  <textarea v-model="text"/>
</Vorlage>

<Skript-Setup>
importiere { ref } von 'vue'
const text = ref('')
</Skript>

<Stilbereich>
  Taste {
    Rand: keiner;
    Gliederung: keine;
    Rand rechts: 10px;
    Hintergrundfarbe: #2ecc71;
    Farbe: weiß;
    Polsterung: 5px 10px;;
  }
</Stil>

Fügen wir dann VueUse hinzu, indem wir die Funktion useRefHistory importieren und dann die Eigenschaften „Verlauf“, „Rückgängig“ und „Wiederholen“ aus unserer Textreferenz extrahieren. Dies ist so einfach wie das Aufrufen von useRefHistory und die Übergabe unseres Verweises.

importiere { ref } von 'vue'
importiere { useRefHistory } von '@vueuse/core'

const text = ref('')
const { Verlauf, Rückgängig, Wiederherstellen } = useRefHistory(Text)

Jedes Mal, wenn sich unser Verweis ändert, wird ein Beobachter ausgelöst, der die gerade erstellte Verlaufseigenschaft aktualisiert.

Damit wir wirklich sehen können, was vor sich geht, drucken wir den Verlauf in unserer Vorlage aus und machen die Aufrufe unserer Funktionen rückgängig oder wiederholen sie, wenn auf die entsprechenden Schaltflächen geklickt wird.

<Vorlage>
  <p> 
    <button @click="undo"> Rückgängig machen </button>
    <button @click="redo"> Wiederherstellen </button>
  </p>
  <textarea v-model="text"/>
  <ul>
    <li v-for="Eintrag im Verlauf" :key="Eintrag.Zeitstempel">
      {{ Eintrag }}
    </li>
  </ul>
</Vorlage>

<Skript-Setup>
importiere { ref } von 'vue'
importiere { useRefHistory } von '@vueuse/core'
const text = ref('')
const { Verlauf, Rückgängig, Wiederherstellen } = useRefHistory(Text)
</Skript>

<Stilbereich>
  Taste {
    Rand: keiner;
    Gliederung: keine;
    Rand rechts: 10px;
    Hintergrundfarbe: #2ecc71;
    Farbe: weiß;
    Polsterung: 5px 10px;;
  }
</Stil>

OK, jetzt lassen Sie es uns ausführen. Während wir tippen, löst jedes Zeichen einen neuen Eintrag im Verlaufs-Array aus, und wenn wir auf „Rückgängig“/„Wiederholen“ klicken, gelangen wir zum entsprechenden Eintrag.

Es gibt auch verschiedene Optionen, um dieser Funktion weitere Funktionen hinzuzufügen. Beispielsweise können wir tief in Reaktionsobjekte eindringen und die Anzahl solcher Verlaufseinträge begrenzen.

const { Verlauf, Rückgängig, Wiederherstellen } = useRefHistory(text, {
  tief: wahr,
  Kapazität: 10,
})

Eine vollständige Liste der Optionen finden Sie in der Dokumentation.

2. onClickOutside schließt das Modal

onClickOutside erkennt jeden Klick außerhalb eines Elements. Der häufigste Anwendungsfall für diese Funktion ist meiner Erfahrung nach das Schließen eines Modals oder Popups.

Oft möchten wir, dass ein Modal den Rest der Webseite ausblendet, um die Aufmerksamkeit des Benutzers zu fokussieren und Fehler zu begrenzen. Wenn Sie jedoch außerhalb des Modals klicken, soll es geschlossen werden.

Dies ist in nur zwei Schritten erledigt:

• Erstellen Sie eine Vorlagenreferenz für das Element, das wir erkennen möchten
• onClickOutside wird mit dieser Vorlagenreferenz ausgeführt

Dies ist eine einfache Komponente mit einem Popup, das onClickOutside verwendet.

<Vorlage>
  <button @click="open = true"> Popup öffnen </button>
  <div Klasse="Popup" v-if='öffnen'>
    <div Klasse="Popup-Inhalt" ref="Popup">
      Ich bin ein sehr korrupter Mensch, und ich bin sehr korrupt! Ich bin sehr korrupt, und ich bin sehr korrupt!
    </div>
  </div>
</Vorlage>
 
 
<Skript-Setup>
importiere { ref } von 'vue'
importiere { onClickOutside } von '@vueuse/core'
const open = ref(false) // Status unseres Popups
const popup = ref() // Vorlagenreferenz
// wann immer unser Popup existiert und wir auf irgendetwas klicken, AUSSER es
beiKlickAußen(Popup, () => {
  offener Wert = false
})
</Skript>
 
 
<Stilbereich>
  Taste {
    Rand: keiner;
    Gliederung: keine;
    Rand rechts: 10px;
    Hintergrundfarbe: #2ecc71;
    Farbe: weiß;
    Polsterung: 5px 10px;;
  }
  .popup {
    Position: fest;
    Spitze: ;
    links: ;
    Breite: 100vw;
    Höhe: 100vh;
    Anzeige: Flex;
    Elemente ausrichten: zentrieren;
    Inhalt ausrichten: zentriert;
    Hintergrund: rgba(, , , 0,1);
  }
  .popup-inhalt {
    Mindestbreite: 300px;
    Polsterung: 20px;
    Breite: 30%;
    Hintergrund: #fff;
  }
</Stil>

Das Ergebnis ist, dass wir das Popup mit unserer Schaltfläche öffnen und es dann schließen können, indem wir außerhalb des Popup-Inhaltsfensters klicken.

3. useVModel vereinfacht die V-Model-Bindung

Ein häufiger Anwendungsfall für Vue-Entwickler ist das Erstellen benutzerdefinierter V-Model-Bindungen für Komponenten. Dies bedeutet, dass unsere Komponente einen Wert als Eigenschaft akzeptiert und jedes Mal, wenn dieser Wert geändert wird, sendet unsere Komponente ein Aktualisierungsereignis an das übergeordnete Element.

Eine vollständige Anleitung zum Erstellen eines benutzerdefinierten V-Modells finden Sie in unserem vollständigen Leitfaden zu diesem Thema.

Die Funktion useVModel vereinfacht dies, indem lediglich die Standard-Ref-Syntax verwendet wird. Nehmen wir an, wir haben eine benutzerdefinierte Texteingabe, die versucht, ein V-Modell für den Wert ihrer Texteingabe zu erstellen. Normalerweise müssen wir eine Eigenschaft für den Wert akzeptieren und dann ein Änderungsereignis ausgeben, um den Datenwert in der übergeordneten Komponente zu aktualisieren.

Anstatt ref zu verwenden und props.value und aufzurufen, können wir es wie ein normales ref verwenden und behandeln! Dadurch wird die Anzahl der unterschiedlichen Syntaxen reduziert, die wir uns merken müssen. aktualisieren:Wert verwendenVModel

<Vorlage>
    <div>
        <Eingabe 
            Typ="Text" 
            :Wert="Daten"
            @input="Aktualisieren"
        />
    </div>
</Vorlage>
 
 
<Skript>
importiere { useVModel } von '@vueuse/core'
Standard exportieren {
  Requisiten: ['Daten'],
  setup(Eigenschaften, { emit }) {
    const data = useVModel(Eigenschaften, 'data', emit)
    console.log(data.value) // gleich props.data
    data.value = 'name' // gleich emit('update:data', 'name')
    const update = (Ereignis) => {
        Datenwert = Ereigniszielwert
    }
    zurückkehren {
        Daten,
        aktualisieren
    }
  },
}
</Skript>

Wenn wir auf unseren Wert zugreifen müssen, rufen wir einfach .valueuseVModel auf und es ruft den Wert aus unseren Komponenteneigenschaften ab. Immer wenn wir den Wert des Objekts ändern, sendet useVModel ein Aktualisierungsereignis an die übergeordnete Komponente.

Hier ist ein kurzes Beispiel, wie eine übergeordnete Komponente aussehen könnte …

<Vorlage>
  <div>
    <p> {{ Daten }} </p>
    <benutzerdefinierte Eingabe 
      :data="Daten" 
      @update:data="Daten = $Ereignis"
    />
  </div>
</Vorlage>
 
 
<Skript>
Importieren Sie CustomInput aus „./components/CustomInput.vue“.
importiere { ref } von 'vue'
Standard exportieren {
  Komponenten:
    Benutzerdefinierte Eingabe,
  },
  aufstellen () {
    const data = ref('hallo')
    zurückkehren {
      Daten
    }
  }
}

Das Ergebnis sieht ungefähr so ​​aus: Unser Wert im übergeordneten Element ist immer mit der Eingabe im untergeordneten Element synchronisiert.

4. Verfolgen Sie die Sichtbarkeit von Elementen mit InterpObserver

Interp Observer sind sehr leistungsfähig, wenn es darum geht, festzustellen, ob sich zwei Elemente überschneiden. Ein guter Anwendungsfall hierfür ist die Überprüfung, ob ein Element aktuell im Ansichtsfenster sichtbar ist.

Im Wesentlichen wird geprüft, welcher Prozentsatz des Zielelements sich mit dem Stammelement/-dokument überschneidet. Wenn der Prozentsatz einen bestimmten Schwellenwert überschreitet, wird ein Rückruf aufgerufen, um zu bestimmen, ob das Zielelement sichtbar ist.

useInterpObserver bietet eine einfache Syntax für die Verwendung der InterpObserver-API. Wir müssen lediglich eine Vorlagenreferenz für das Element angeben, das wir prüfen möchten.

Standardmäßig verwendet der InterpObserver das Ansichtsfenster des Dokuments als Wurzel mit einem Schwellenwert von 0,1. Wenn dieser Schwellenwert also in eine beliebige Richtung überschritten wird, wird unser Schnittpunkt-Observer ausgelöst.

Der Code für dieses Beispiel könnte ungefähr so ​​aussehen, wobei wir einen Blindabsatz haben, der nur im Ansichtsfenster, im Zielelement, Platz einnimmt.

<Vorlage>
  <p> Ist das Ziel sichtbar? {{ targetIsVisible }} </p>
  <div Klasse="Container">
    <div Klasse="Ziel" ref="Ziel">
      <h1>Hallo Welt</h1>
    </div>
  </div>
</Vorlage>
 
 
<Skript>
importiere { ref } von 'vue'
importiere { useInterpObserver } von '@vueuse/core'
Standard exportieren {
  aufstellen() {
    const Ziel = ref(null)
    const targetIsVisible = ref(false)
    const { stop } = useInterpObserver(
      Ziel,
      ([{ istIntersecting }], BeobachterElement) => {
        targetIsVisible.value = istSchnittpunkt
      },
    )
    zurückkehren {
      Ziel,
      ZielIstSichtbar,
    }
  },
}
</Skript>
 
 
<Stilbereich>
.container {
  Breite: 80%;
  Rand: automatisch;
  Hintergrundfarbe: #fafafa;
  maximale Höhe: 300px;
  Überlauf: scrollen;
}
.Ziel {
  Rand oben: 500px;
  Hintergrundfarbe: #1abc9c;
  Farbe: weiß;
  Polsterung: 20px;
}
</Stil>

Wenn wir es ausführen und scrollen, sehen wir, dass es korrekt aktualisiert wird.

Wir können auch weitere Optionen für den Interp Observer angeben, z. B. das Ändern seines Stammelements, des Rands (der Versatz des Stammbegrenzungsrahmens, der zum Berechnen der Schnittpunkte verwendet wird) und des Schwellenwerts.

//useInterpObserver-Optionen const { stop } = useInterpObserver(
      Ziel,
([{ istIntersecting }], BeobachterElement) => {
        targetIsVisible.value = istSchnittpunkt
      },
      {
// Wurzel, Wurzelrand, Schwelle, Fenster
// vollständige Optionen in der Quelle: https://github.com/vueuse/vueuse/blob/main/packages/core/useInterpObserver/index.ts
        Schwellenwert: 0,5,
      }
)

Es ist auch wichtig zu sehen, dass diese Methode eine Stoppfunktion zurückgibt, die wir aufrufen können, um die Beobachtung von Kreuzungen zu beenden. Dies ist besonders nützlich, wenn wir nur verfolgen möchten, wann ein Element zum ersten Mal auf dem Bildschirm sichtbar wird.

Sobald in diesem Codeausschnitt „targetIsVisible“ auf „true“ gesetzt ist, wird der Beobachter angehalten und selbst wenn wir vom Zielelement wegscrollen, bleibt unser Wert „true“.

//InterpObserver stoppen
const { stop } = useInterpObserver(
      Ziel,
      ([{ istIntersecting }], BeobachterElement) => {
        targetIsVisible.value = istSchnittpunkt
        wenn (istSchnittpunkt) {
          stoppen()
        }
      },
    )

5. useTransition, um zwischen Werten zu wechseln

useTransition ist eine meiner Lieblingsfunktionen in der gesamten VueUse-Bibliothek. Dadurch können wir reibungslos zwischen Werten in einer Reihe wechseln.

Wir haben eine als Referenz gespeicherte digitale Quelle und eine Ausgabe, die den Übergang zwischen verschiedenen Werten darstellt. Nehmen wir beispielsweise an, wir möchten einen Zähler ähnlich dem auf der Anmeldeseite für unseren Vue 3-Spickzettel erstellen.

Dies können wir in drei Schritten tun:

• Erstellen Sie unseren Countref und initialisieren Sie ihn auf Null
• Erstellen Sie unsere Ausgabereferenz useTransition (legen Sie unsere Dauer und den Übergangstyp fest)
• Ändern des Count-Werts

// Konvertierungscode verwenden <script setup>
importiere { ref } von 'vue'
importiere { useTransition, TransitionPresets } von '@vueuse/core'
 
 
const Quelle = ref(0)
 
 
const Ausgabe = useTransition(Quelle, {
  Dauer: 3000,
  Übergang: TransitionPresets.easeOutExpo,
})
 
 
Quellwert = 5000
</Skript>

Dann möchten wir in unserer Vorlage den Ausgabewert anzeigen, da der Übergang zwischen verschiedenen Werten reibungslos verläuft.

<Vorlage>
  <h2> 
    <p> Mach mit bei </p>
    <p> {{ Math.round(Ausgabe) }}+ </p>
    <p>Entwickler </p>
  </h2>
</Vorlage>
 
 
<Skript-Setup>
importiere { ref } von 'vue'
importiere { useTransition, TransitionPresets } von '@vueuse/core'
const Quelle = ref()
const Ausgabe = useTransition(Quelle, {
  Dauer: 3000,
  Übergang: TransitionPresets.easeOutExpo,
})
Quellwert = 5000
</Skript>

Hier sind die Ergebnisse!

Wir können Transition auch verwenden, um die gesamte Zahlenreihe zu transformieren. Dies ist nützlich, wenn mit Position oder Farbe gearbeitet wird. Ein wichtiger Trick für die Arbeit mit Farben besteht darin, berechnete Eigenschaften zu verwenden, um RGB-Werte in die richtige Farbsyntax zu formatieren.

<Vorlage>
<h2:style="{ color: color }"> FARBWECHSEL </h2>
</Vorlage>
<Skript-Setup>
importiere { ref, berechnet } von 'vue'
importiere { useTransition, TransitionPresets } von '@vueuse/core'
const Quelle = ref([, , ])
const Ausgabe = useTransition(Quelle, {
Dauer: 3000,
Übergang: TransitionPresets.easeOutExpo,
})
const Farbe = berechnet(() => {
const [r, g, b] = Ausgabewert
gibt `rgb(${r}, ${g}, ${b})` zurück
})
Quelle.Wert = [255, , 255]
</Skript> 

Es gibt auch einige coole Möglichkeiten, wie wir dies weiter anpassen können, entweder indem wir eine der integrierten Übergangsvorgaben verwenden oder sie mithilfe von CSS-Easing-Funktionen definieren, es liegt bei Ihnen.

Abschließende Gedanken

Dies ist keinesfalls eine vollständige Anleitung zu VueUse. Dies sind nur einige der vielen Funktionen in VueUse, die ich am interessantesten fand.

Was mir an all diesen Hilfsfunktionen gefällt, ist, dass sie uns helfen können, unsere Entwicklungsprojekte zu beschleunigen und unsere Entwicklungseffizienz zu verbessern, da jede von ihnen darauf ausgelegt ist, einen spezifischen, aber häufigen Anwendungsfall zu lösen.

Damit ist dieser Artikel über 5 VueUse-Funktionsbibliotheken, die die Entwicklung beschleunigen können, abgeschlossen. Weitere relevante Inhalte zu VueUse-Funktionsbibliotheken finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!