Teilen Sie fünf nützliche VueUse-Funktionen, lassen Sie uns sie gemeinsam nutzen!

VueUse ist ein Open-Source-Projekt von Anthony Fu. Es bietet Vue-Entwicklern eine große Anzahl grundlegender Composition-API-Dienstprogrammfunktionen für Vue2 und Vue3.

Es bietet Dutzende Lösungen für gängige Anwendungsfälle von Entwicklern, z. B. die Nachverfolgung von Ref-Änderungen, die Erkennung der Sichtbarkeit von Elementen, die Vereinfachung gängiger Vue-Muster, Tastatur-/Mauseingaben usw. Dies ist eine großartige Möglichkeit, wirklich Entwicklungszeit zu sparen, da wir nicht alle diese Standardfunktionen selbst hinzufügen müssen, sondern sie einfach verwenden und nutzen (nochmals vielen Dank für Ihre Bemühungen).

Ich mag die VueUse-Bibliothek, weil sie die Entwickler bei der Entscheidung, welche Dienstprogramme bereitgestellt werden sollen, wirklich in den Vordergrund stellt, und es ist eine gut gepflegte Bibliothek, weil sie mit der aktuellen Version von Vue Schritt hält.

Was sind die praktischen Methoden von VueUse?

Wenn Sie die vollständige Liste aller Dienstprogramme sehen möchten, empfehlen wir Ihnen, sich die offizielle Dokumentation anzusehen. Zusammenfassend lässt sich sagen, dass es in VueUse 9 Arten von Funktionen gibt.

• Animation – Enthält benutzerfreundliche Übergänge, Zeitüberschreitungen und Timing-Funktionen.

• Browser – Kann mit verschiedenen Bildschirmsteuerungen, Zwischenablagen, Einstellungen und mehr verwendet werden.

• Komponente (Komponente) – Bietet Abkürzungen für verschiedene Komponentenmethoden

• Sensoren (Sensoren) – Wird zum Abhören verschiedener DOM-Ereignisse, Eingabeereignisse und Netzwerkereignisse verwendet

• State (Status) – Benutzerstatus verwalten (global, lokaler Speicher, Sitzungsspeicher)

• Dienstprogramm (Utility-Methode) – verschiedene Utility-Methoden, wie Getter, Bedingungen, Ref-Synchronisierung usw.

• Beobachten – Fortgeschrittenere Beobachtertypen wie pausierbare Beobachter, abgebrochene Beobachter und bedingte Beobachter

• Andere – Verschiedene Arten von Funktionen für Ereignisse, WebSockets und Web-Worker

Installieren Sie Vueuse im Vue-Projekt

Eine der größten Eigenschaften von VueUse ist, dass es mit Vue2 und Vue3 mit nur einem Paket kompatibel ist!

Es gibt zwei Optionen für die Installation von VueUse: npm oder CDN

npm i @vueuse/core # yarn add @vueuse/core

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

Empfohlenes NPM, weil es einfacher zu verstehen ist, aber Wenn wir ein CDN verwenden, kann darauf über window.VueUse zugegriffen werden.

Mit npm können Sie die gewünschte Methode durch Dekonstruktion erhalten:

import { useRefHistory } from '@vueuse/core'

useRefHistory verfolgt Änderungen in reaktionsfähigen Daten

useRefHistory verfolgt jede an ref vorgenommene Änderung und speichert sie in einem Array. Dies ermöglicht es uns, unseren Anwendungen problemlos Rückgängig- und Wiederherstellungsfunktionen bereitzustellen.

Schauen wir uns ein Beispiel an, in dem wir einen Textbereich erstellen, der rückgängig gemacht werden kann

Der erste Schritt besteht darin, unsere Basiskomponenten ohne VueUse zu erstellen – mit ref, textarea und für Rückgängig und Wiederherstellen. Hergestellt aus Schaltflächen.

<template>
  <p> 
    <button> Undo </button>
    <button> Redo </button>
  </p>
  <textarea v-model="text"/>
</template>

<script setup>
import { ref } from &#39;vue&#39;
const text = ref(&#39;&#39;)
</script>

<style scoped>
  button {
    border: none;
    outline: none;
    margin-right: 10px;
    background-color: #2ecc71;
    color: white;
    padding: 5px 10px;;
  }
</style>

Als nächstes importieren Sie useRefHistory und extrahieren dann den Verlauf sowie die Rückgängig- und Wiederherstellungsattribute aus dem Text über useRefHistory.

import { ref } from 'vue'
import { useRefHistory } from '@vueuse/core'

const text = ref('')
const { history, undo, redo } = useRefHistory(text)

Immer wenn sich unsere Referenz ändert und das Verlaufsattribut aktualisiert wird, wird ein Listener ausgelöst.

Um zu sehen, was die unterste Ebene tut, drucken wir den Verlaufsinhalt aus. Und rufen Sie die Funktionen „Rückgängig“ und „Wiederherstellen“ auf, wenn Sie auf die entsprechende Schaltfläche klicken.