Zusammenfassung praktischer Fähigkeiten, die häufig in Vue-Projekten verwendet werden

Vorwort

Bei der Entwicklung von Vue-Projekten treten häufig Probleme auf, beispielsweise Code-Duplikation und Komplexität. Tatsächlich gibt es viele Techniken, die bei der Entwicklung von Vue-Projekten verwendet werden können. Dieser Artikel listet einige einfache und leicht anzuwendende Techniken auf, die uns beim Schreiben schönen Codes helfen. Der verwendete Technologie-Stack ist Vue2.0 + TypeScript + vue-property-decorator + ElementUI. Dabei kommen folgende Techniken zum Einsatz:

• Verwenden Sie $attrs und $listeners für die mehrstufige Daten- und Ereignisübermittlung
• Realisieren Sie eine bidirektionale Datenbindung, um die Datenpflege zu erleichtern
• Verwenden von Mixins
• Verwenden Sie dynamische Komponenten zum verzögerten Laden von Komponenten
• Verwenden Sie ::v-deep in CSS mit Komponentenumfang, um Komponentenstile zu ändern
• Code mit Dekoratoren optimieren
• Verwenden Sie require.context, um Projektverzeichnisinformationen abzurufen

1. Verwenden Sie $attrs und $listeners für die mehrstufige Daten- und Ereignisübermittlung

Lassen Sie uns zunächst darüber sprechen, wie Props übergeben werden. Sie können in statische und dynamische Props unterteilt werden:

<!-- Statische Eigenschaft -->
<blog-post title="Meine Reise mit Vue"></blog-post>
<!-- Dynamische Eigenschaft -->
<blog-post v-bind:title="post.title"></blog-post>
<!-- Die dynamische Übertragung von Eigenschaften kann verkürzt werden auf -->
<blog-beitrag :title="beitrag.title"></blog-beitrag>
<!-- Wenn Sie mehrere Props übergeben müssen, können Sie sie zusammen auf v-bind schreiben-->
<blog-post v-bind="{ editierbar, Titel: Beitrag.Titel}"></blog-post>

Nachdem wir nun wissen, wie Props übergeben werden, schauen wir uns an, wie die offizielle Dokumentation $attrs definiert. In der Dokumentation von You Dada wird $attrs wie folgt eingeführt:

$attrs: Enthält Attributbindungen im übergeordneten Bereich, die nicht als Eigenschaften erkannt (und abgerufen) werden (außer Klasse und Stil). Wenn eine Komponente keine Props deklariert, werden alle übergeordneten Bereichsbindungen (außer Klasse und Stil) hier eingeschlossen und können über v-bind="$attrs" an die innere Komponente übergeben werden.

$attrs enthält andere Eigenschaften, die nicht in Eigenschaften deklariert sind, die an den übergeordneten Bereich übergeben werden. Daher können wir $attrs verwenden, um Eigenschaften zu ersetzen, die in der übergeordneten Komponente nicht benötigt werden, aber von der untergeordneten Komponente benötigt werden, und sie einheitlich über v-bind="$attrs" an die Nachkommen weitergeben. Dadurch wird vermieden, dass sie einzeln deklariert und dann einzeln weitergegeben werden.

<blog-post v-bind="$attrs"></blog-post>

Die obige Codezeile übergibt andere Attribute in diesem Bereich, die keine Eigenschaften sind, über v-bind="$attrs" an die Blog-Post-Komponente.

Nachdem die übergeordnete Komponente über $attrs an die untergeordnete Komponente übergeben wurde, was soll die untergeordnete Komponente tun, wenn sie den Status der übergeordneten Komponente durch Auslösen eines Ereignisses aktualisieren möchte? Wird der Code zu umständlich und kompliziert, wenn wir Ereignisse Ebene für Ebene ausgeben? In Vue kann dieses Problem durch $listeners gelöst werden. Werfen Sie zunächst einen Blick auf die offizielle Dokumentation zu $listeners:

Schließt v-on-Ereignislistener aus dem übergeordneten Bereich ein (ohne den Modifikator .native). Es kann über v-on="$listeners" an innere Komponenten übergeben werden – sehr nützlich beim Erstellen von Komponenten auf höherer Ebene.

In der Dokumentation heißt es, dass $listeners Ereignis-Listener im übergeordneten Bereich enthält. Das bedeutet, dass $listeners den Ereignis-Listener darstellt, der in der übergeordneten Komponente festgelegt ist. Solange das Ereignis die übergeordnete Komponente und nicht seine eigene auslöst, kann es durch ein v-on="$listeners" dargestellt werden.

<!-- Übergeordnete Komponente (Komponente der ersten Ebene) -->
<componentA @on-change="handleChange" v-bind="{ editierbar, Titel: post.title}" />

<!-- Komponenten der mittleren Schicht -->
<Kind v-bind="$attrs" v-on="$listeners"/>

<!-- Die Zielkomponente für die Datenübertragung, die durch das Ereignis ausgelöste Komponente-->
<div @click="handleClick">{{ Titel }} </div>
<Skript>
  Standard exportieren {
    Requisiten: {
      Titel: Zeichenfolge
    }
    handleKlick() {
      this.$emit('on-change', 'Neuer Titel');
    }
  }
</Skript>

Im obigen Codebeispiel werden die restlichen Props über v-bind="$attrs" in der Komponente der mittleren Ebene an die untergeordnete Komponente übergeben, und dann wird der Ereignislistener im übergeordneten Bereich über v-on="$listeners" gebunden. Nach der Ausgabe wird er an die übergeordnete Komponente übergeben.

2. Realisieren Sie eine bidirektionale Datenbindung, um die Datenwartung zu erleichtern

Es gibt viele solcher Szenarien, in denen die übergeordnete Komponente Daten an die untergeordnete Komponente übergeben muss. Wenn die untergeordnete Komponente eine Datenaktualisierung auslöst, gibt sie diese sofort an die übergeordnete Komponente zurück, die Daten der übergeordneten Komponente werden aktualisiert, die Daten fließen unidirektional an die untergeordnete Komponente und schließlich wird die untergeordnete Komponente aktualisiert. Normalerweise wird props + $emit verwendet, um den Status zu aktualisieren, aber dieser Ansatz ist etwas umständlich und schwierig zu pflegen, sodass die Wartbarkeit des Codes durch die Implementierung einer „bidirektionalen Bindung“ von Daten verbessert werden kann. Dies kann erreicht werden durch:

Verwenden Sie .sync, um die „bidirektionale Bindung“ von Prop zu implementieren

Fügen Sie den Modifikator .sync hinzu, wenn Sie die Eigenschaft v-bind verwenden, und verwenden Sie this.$emit('update:propName', newValue), wenn Sie neue Werte zuweisen.

<!-- .sync ist eine Abkürzung für den v-on:update-Modus -->
<Child v-on:update:title="Titel" />
<!-- entspricht -->
<Child :title.sync="Titel" />

Wenn Sie den Titelwert im obigen Code aktualisieren möchten, müssen Sie nur this.$emit('update:title', 'new title') verwenden, um die Datenaktualisierung abzuschließen.

Verwenden der Modelloption

model ist eine neue Option, die in 2.2.0+ hinzugefügt wurde. Standardmäßig verwendet v-model auf einer Komponente einen Prop-Namen „value“ und einen Event-Namen „input“. Die Modelloption kann den Prop-Namen und den Event-Namen angeben, um v-model zu implementieren. Der Vorteil besteht darin, dass bei der Implementierung von v-model auch Konflikte zwischen Prop- und Event-Namen vermieden werden.

<!-- Übergeordnete Komponente -->
<Modell v-Modell="geprüft"/>

<!-- Modellkomponente -->
<div @click="Klickgriff">
  <p>V-Modell benutzerdefinierter Komponenten</p>
  geprüft {{geprüft}}
</div>
<script lang="ts">
Standard exportieren {
  Modell: {
    Requisite: "geprüft",
    Ereignis: „Ändern“
  },
  Requisiten: {
    geprüft: Boolesch
  },
  Methoden: {
    handleKlick() {
      dies.$emit('ändern', !dies.geprüft);
    }
  }

Im obigen Code müssen Sie zur Implementierung des V-Modells nur Prop und Event zur Modelloption hinzufügen. Im Vue + TS-Projekt stellt vue-property-decorator einen Modelldekorator bereit, der wie folgt geschrieben werden muss:

@Model('change', { type: Boolean }) schreibgeschützt aktiviert!: boolean
handleKlick() {
  dies.$emit('ändern', !dies.geprüft);
}

Wir können eine „bidirektionale Bindung“ von Daten nur über .sync und Modell erreichen. Wenn wir Code auf diese Weise schreiben, können wir unseren Code bis zu einem gewissen Grad reduzieren und ihn eleganter und wartungsfreundlicher machen.

3. Mixins verwenden

Mixins können in zwei Szenarien verwendet werden:

1. Verwenden Sie es, um gemeinsamen Code innerhalb von Komponenten zu extrahieren und so die Wiederverwendung von Code zu verbessern. Verwenden Sie es nicht global wieder. Am besten verwenden Sie es innerhalb einer Komponente oder Seite.
2. Bei der Verwendung zum Trennen von Funktionspunkten kann es manchmal zu einer Situation kommen, in der viele Geschäftsfunktionen vorhanden sind, was zu einer großen Anzahl von Zeilen in der Vue-Datei führt, die Wartung des Codes erschwert und die Nachverfolgung des Funktionspunktcodes schwierig macht. Diese riesige Vue-Datei kann durch das Extrahieren funktionaler Codes besser verwaltet werden.

Schreiben Sie zunächst eine öffentliche Mixin-Datei und schreiben Sie darin leicht wiederverwendbare Zustände und Funktionen.

exportiere Standardklasse CommonMixins erweitert Vue{
    öffentliche Paginierungen = {
        Seitengröße: 20,
        gesamt: 0,
        aktuelleSeite: 1,
    }
    handleChangePageSize (Seitengröße: Zahl, cb: Funktion) {
        this.paginations.pageSize = Seitengröße;
        cb();
    }
    handleChangePageNum (currentPage: Nummer, cb: Funktion) {
        this.paginations.currentPage = aktuelleSeite;
        cb();
    }
}

vue-property-decorator stellt einen Dekorator für Mixins bereit. Um Mixins in eine Geschäftsseite einzuführen, müssen Sie nur Mixins übergeben. Sie können mehrere Mixins übergeben, was bedeutet, dass Sie mehrere Mixins mischen können.

<script lang="ts">
importiere { Komponente, Mixins } von „vue-property-decorator“;
importiere CommonMixins aus "./common-mixin";
importiere PermissionMixins aus "./permission-mixin";
@Komponente({})
exportiere Standardklasse Parent erweitert Mixins(CommonMixins, PermissionMixins) {
}
</Skript>

Wenn Sie nur eines benötigen, können Sie auch direkt erben

<script lang="ts">
importiere { Komponente, Mixins } von „vue-property-decorator“;
importiere CommonMixins aus "./common-mixin";
@Komponente({})
exportiere Standardklasse Parent erweitert CommonMixins {
}
</Skript>

Wenn wir auf eine Seite mit vielen Funktionen und einer großen Menge Code stoßen, können wir mit Mixin einige Funktionen extrahieren und diese Funktionen über Dateien verwalten, was die Verwaltung des Codes erleichtert.

4. Verwenden Sie dynamische Komponenten, um Komponenten verzögert zu laden

Komponenten werden synchron geladen, aber wenn die Seite viel Inhalt hat, müssen einige Komponenten nicht am Anfang geladen werden, z. B. Popup-Komponenten. Diese können dynamische Komponenten verwenden und diese laden, nachdem der Benutzer bestimmte Vorgänge ausgeführt hat. Dies kann die Leistung beim Laden des Hauptmoduls verbessern. In Vue können Sie dynamische Komponenten verwenden, um zu entscheiden, welche Komponente basierend auf dem Wert von is gerendert werden soll.

<Vorlage>
  <div>
    Startseite<br/>
    <button @click="handleClick1">Klicken Sie auf Datensatzkomponente 1</button><br/>
    <button @click="handleClick2">Klicken Sie auf Datensatzkomponente 2</button><br/>
    <Komponente: ist = "Kind1""></Komponente>
    <Komponente: ist = "Kind2"></Komponente>
  </div>
</Vorlage>
<script lang="ts">
importiere { Komponente, Vue } von „vue-property-decorator“;
@Komponente({})
exportiere Standardklasse AsyncComponent erweitert Vue {
  öffentliches Kind1:Komponente = null;
  öffentliches Kind2:Komponente = null;
  handleClick1() {
    dies.child1 = erfordert('./child1').default;
  }
  handleClick2() {
    dies.child2 = erfordert('./child2').default;
  }
}
</Skript>

Im Beispielcode wird die Komponente nur geladen, wenn darauf geklickt wird. Die Komponente kann außerdem mit v-show ein- und ausgeblendet werden, sodass die Komponente zur Leistungsoptimierung nur einmal gemountet wird.

5. Verwenden Sie ::v-deep in komponentenbezogenem CSS, um Komponentenstile zu ändern

Es gibt viele Szenarien, in denen Sie den Stil einer UI-Komponente ändern möchten, aber Angst haben, die Nutzung durch andere Benutzer zu beeinträchtigen, und die Änderung nach dem Hinzufügen des Gültigkeitsbereichs möglicherweise nicht wirksam wird. Sie können den tiefen Selektor ::v-deep verwenden, um den CSS-Stil innerhalb des Komponentenbereichs zu ändern. In CSS können wir den Operator >>> verwenden, aber im Präprozessor müssen wir /deep/ oder ::v-deep verwenden.

<Stilbereich>
>>> .ivu-tabs-tabpane {
        Hintergrund: #f1f1f1;
    }
</Stil>
<style lang="scss" scoped>
/deep/ .ivu-tabs-tabpane {
        Hintergrund: #f1f1f1;
    }
</Stil>
<style lang="scss" scoped>
::v-tief .ivu-tabs-tabpane {
        Hintergrund: #f1f1f1;
    }
</Stil>

::v-deep und /deep/ haben dieselbe Funktion, aber /deep/ wird nicht empfohlen. In Vue 3.0 wird /deep/ nicht unterstützt.

6. Verwenden Sie Dekoratoren, um Code zu optimieren

Dekoratoren verbessern die Lesbarkeit des Codes, bringen die Absicht klar zum Ausdruck und bieten eine bequeme Möglichkeit, die Funktionalität einer Klasse zu erweitern oder zu ändern, beispielsweise durch die Bereitstellung einer Anti-Shake-Funktionalität für Methoden in der Klasse.

Entprellung von „lodash.debounce“ importieren;
Exportfunktion Debounce(Verzögerung: Zahl, Konfiguration: Objekt = {}) {
  return (Ziel: beliebig, Eigenschaft: Zeichenfolge) => {
    zurückkehren {
      Wert: Entprellung(Ziel[Eigenschaft], Verzögerung, Konfiguration),
    };
  };
}

Dies hat den Vorteil, dass es sehr komfortabel zu verwenden ist und die Lesbarkeit des Codes erhöht.

@Entprellung(300)
beiIdÄnderung(Wert: Zeichenfolge) {
  dies.$emit('idchange', val);
}

7. Verwenden Sie require.context, um Projektverzeichnisinformationen abzurufen

In Bezug auf require.context wird es in der Webpack-Dokumentation folgendermaßen beschrieben:

Sie können dieser Funktion drei Argumente übergeben: ein zu durchsuchendes Verzeichnis, ein Flag, das angibt, ob auch dessen Unterverzeichnisse durchsucht werden sollen, und einen regulären Ausdruck zum Abgleichen von Dateien.
webpack analysiert während des Builds require.context() in Ihrem Code. Diese Funktion ist hilfreich, wenn Sie alle Dateien in einem Ordner oder alle Dateien importieren möchten, die einem regulären Ausdruck entsprechen.

Gemäß dieser Eingabeaufforderung können wir auf alle Dateien in einem Ordner verweisen und die erhaltenen Dateiinformationen verwenden, um einige Vorgänge auszuführen. Beispielsweise mussten wir beim Registrieren von Komponenten diese ursprünglich einzeln importieren und registrieren. Wenn wir später neue hinzufügen möchten, müssen wir sie erneut schreiben. Jetzt können wir require.context verwenden, um diesen Codeabschnitt zu optimieren.

// WmsTable aus „./wms-table/table/index“ importieren;
Tabelle aus „./table/index.vue“ importieren;
Importieren Sie CustomHooks aus „./custom-hooks/custom-hooks-actions/index“.
importiere SFilter aus „./s-filter/filter-form“;
importiere WButton aus „./button/index“;
importiere CreateForm aus „./createForm/create-form/CreateForm.vue“;
Aktion aus „./table/action-table-column.vue“ importieren;
importiere DetailItem aus „./detail-item.vue“;


Vue.component('w-filter', SFilter);
Vue.component('w-button', WButton);
Vue.component('benutzerdefinierte Hooks', Benutzerdefinierte Hooks);
Vue.component('create-form', Formular erstellen);
Vue.component('w-table', Tabelle);
Vue.component('w-table-action', Aktion);
Vue.component('zonetime-date-picker', ZonetimeDatePicker);
Vue.component('detail', DetailItem);

Beim Registrieren globaler Komponenten müssen diese nicht einzeln importiert und registriert werden. Verwenden Sie require.context, um Module automatisch zu importieren. Dies hat den Vorteil, dass wir beim Erstellen einer neuen Komponente diese nicht manuell registrieren müssen, sondern dass dies zu Beginn automatisch für uns abgeschlossen wird.

const Kontexte = require.context('./', true, /\.(vue|ts)$/);
Standard exportieren {
  installieren (vm) {
    Kontexte.Schlüssel().fürJeden(Komponente => {
      const componentEntity = Kontexte(Komponente).Standard;
      wenn (KomponentenEntität.Name) {
        vm.component(KomponentenEntity.name, KomponentenEntity);
      }
    });
  }
};

Zusammenfassen

In diesem Artikel werden einige Techniken vorgestellt, die in der Vue-Praxis häufig verwendet werden. Der Zweck dieser Techniken besteht darin, die Entwicklungseffizienz zu verbessern, z. B. durch die einfache Implementierung einer bidirektionalen Datenbindung und einer plattformübergreifenden Datenübertragung. Darüber hinaus können sie auch die Wartbarkeit und Lesbarkeit des Codes verbessern, z. B. durch sehr praktische Dekoratoren und die Verwendung von Mixin zum Aufteilen von Code und Verwalten von Funktionspunkten.

Damit ist dieser Artikel mit der Zusammenfassung der in Vue-Projekten häufig verwendeten praktischen Fähigkeiten abgeschlossen. Weitere Inhalte zu häufigen Fähigkeiten in Vue-Projekten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Verweise

• require.context
• Offizielle Vue-Dokumentation