Vue.js-Anwendung verbessern. Einige praktische Tipps

 

   (( item.name ))
 

...und wir werden einen Fehler wie diesen sehen:

Wir können damit umgehen, indem wir mit JSX und einer funktionalen KomponenteAuch hier sollten wir einen Booleschen Wert übergeben, der das v-if ersetzt.

</>

Keine API-Aufruf-Handler in Komponenten schreiben

Eigentlich ist dies nur eines der Beispiele dafür, was man in Komponenten nicht tun sollte. Tun Sie einfach das, was lokal in der Komponentenlogik notwendig ist. Jede Methode, die extern sein könnte, sollte abgetrennt und nur in den Komponenten aufgerufen werden, z. B. in der Geschäftslogik.

Beispiel:

Statt einer Methode wie dieser:

erstellt() (
this.fetchArticles();
),
Methoden: (
 async fetchArticles() (
  try (
    const data = await axios.get(url);
    this.articles = data.articles;
    ) catch (e) (
    // Fehler behandeln
    )
  )
)

Schreiben Sie etwas in dieser Art - rufen Sie einfach die richtige Methode auf, die API-Ergebnisse zurückgibt:

 async fetchArticles() (
   try (
     this.articles = await ArticlesService.fetchAll();
   ) catch (e) (
     // Fehler behandeln
   )
  )

Verwendung von Steckplätzen statt großer Mengen von Requisiten

Manchmal ist die Verwendung von Requisiten ausreichend, aber es gibt auch Fälle, in denen sie nicht effizient sind. Das kann in Situationen passieren, in denen wir zu viele Requisiten hinzufügen müssen, damit die Komponente so funktioniert, wie wir es wollen. Das einfachste Beispiel könnte eine Schaltflächenkomponente sein. Zweifelsohne handelt es sich um eine Komponente, die überall in einer Anwendung verwendet werden kann. Betrachten wir also eine Schaltflächenkomponente wie diese.

(( Text ))

In diesem Stadium ist es eine einfache Komponente, die nur Textrequisiten akzeptiert. Ok, aber es kann nicht genug sein, da wir Icons in der Schaltfläche benötigen werden. In diesem Fall müssen wir 2 weitere Requisiten hinzufügen (2, weil wir die Möglichkeit haben wollen, sie vor oder nach dem Text einzufügen). Die Komponente wird also wie folgt aussehen:

(( Text ))

Es ist nicht schlecht, wir haben nur 3 Stützen, aber...

Was ist, wenn wir einen Belastungsindikator benötigen? Nun, dann müssten wir eine weitere Stütze hinzufügen. Und das für jede neue Funktion! Klingt es jetzt herausfordernd, mit dem Wachstum der Anzahl der Komponenten Schritt zu halten? Ja, das tut es, definitiv!

Verwenden wir stattdessen Steckplätze.

Einfacher, nicht wahr? Ok, aber wie können wir die Funktion "Symbol hinzufügen" bekommen? Das ist wirklich einfach! Verwenden Sie einfach die Komponente wie folgt:

Zurück

Weiter

Einfacher Weg zur Leistungssteigerung

Ich werde Ihnen einige Tipps geben, die wirklich einfach umzusetzen sind, so dass Sie sofort davon profitieren können.

Faule Lastrouten

Manchmal gibt es Routen, die nur für Admins oder Benutzer mit besonderem Zugang verfügbar sind, oder sie werden weniger besucht als andere. Das sind perfekte Fälle für die Verwendung der "Lazy Load"-Route.

Verwenden Sie einfach die Pfeilfunktion in Ihrer Komponenteneigenschaft, um die Importfunktion zurückzugeben:

 export default new VueRouter (
   (
     Modus: 'Geschichte',
     routes: [
       (
         path: '/landing',
         component: () => import('../pages/p-welcome'),
         name: 'willkommen'
       ),
  ...

Anstelle von:

import PWelcome from '@/pages/p-welcome';

export default new VueRouter (
(
Modus: 'Geschichte',
routes: [
(
path: '/landing',
component: PWelcome, //gerade importierte Komponente
name: 'willkommen'
),

Langsames Laden von Vue-Komponenten

Eine ähnliche Situation kann eintreten bei Vue-Bestandteile. Wir können einzelne Dateikomponenten auf diese Weise importieren:

const lazyComponent = () => import('pathToComponent.vue')
export default (
Komponenten: (lazyComponent )
)

// Eine andere Syntax
exportieren Standard (
Komponenten: (
lazyComponent: () => import('pathToComponent.vue')
)
)

Dank der "Lazy Load"-Funktion dieser Komponente wird sie nur bei Anforderung heruntergeladen. Wenn wir zum Beispiel eine Komponente mit v-if haben, wird sie nur angefordert, wenn die Komponente gerendert werden soll. Wenn also der v-if-Wert nicht wahr ist, wird die Komponente nicht geladen. Aus diesem Grund kann Lazy Importing auch verwendet werden für JavaScript Dateien.

Bonus: Bei der Verwendung von Vue CLI 3+ wird standardmäßig jede träge geladene Ressource vorgeholt!

Verwendung von transparenten Wrappern anstelle von Attributrequisiten

Betrachten Sie eine Komponente wie diese:

Ohne Probleme können wir es so verwenden:

oder

Es funktioniert, weil Vue ermöglicht es Ihnen, HTML-Attribute an die Komponente zu übergeben, auch wenn Sie sie nicht als Requisiten deklariert haben. Die HTML-Attribute werden auf das Wurzelelement der Komponente (in diesem Fall input) angewendet.

Das Problem tritt auf, wenn wir unsere Eingabekomponente erweitern wollen, denn sie könnte wie folgt aussehen:

<code> <template>
   <div class="form-group">
     <label :for="id">(( Etikett ))</label>
     <input
       :id="id"
       :value="value"
       class="base-input"
       @input="$emit('input', $event.target.value)"
     >
   </div>
 </template>

Wenn Sie die Komponente auf diese Weise verwenden:

wird nicht so funktionieren, wie wir es wollen, weil der Typ und der Platzhalter auf div (Root-Element) angewendet werden und das macht keinen Sinn. Wir müssen uns also damit auseinandersetzen, denn wir wollen dem Eingabeelement unsere Attribute hinzufügen. Ihr erster Gedanke ist vielleicht: "Fügen wir die Requisiten hinzu, die wir brauchen!", und natürlich wird das funktionieren, aber... was, wenn wir Folgendes verwenden wollen Typ, Autovervollständigen, Platzhalter, Autofokus, deaktiviert, Eingabemodususw., dann müssen wir die Requisiten für jedes HTML-Attribut definieren. Ich persönlich mag diese langwierige Methode nicht, also lasst uns nach etwas Besserem suchen!

Wir können das gesamte Problem in nur zwei Zeilen.

<template>
  <div class="form-group">
    <label :for="id">(( Etikett ))</label>
    <!-- pay attention to v-bind="$attrs" -->
    <input
      :id="id"
      v-bind="$attrs"
      :value="value"
      class="base-input"
      @input="$emit('input', $event.target.value)"
    >
  </div>
</template>

<script>
export default (
  name: 'BaseInput',
  inheritAttrs: false, // <- pay attention to this line
  props: ['value', 'label', 'id']
);
</script>

Wir können verwenden v-bind="$attrs" und übergeben Sie Attribute direkt an <input> ohne große Mengen von Requisiten zu deklarieren. Denken Sie auch daran, die Option inheritAttrs: false um die Übergabe der Attribute an das Wurzelelement zu deaktivieren. Gehen wir noch einen Schritt weiter: Was ist, wenn wir dieser Eingabe Ereignis-Listener hinzufügen müssen? Auch hier könnte man mit Requisiten oder benutzerdefinierten Ereignissen arbeiten, aber es gibt eine bessere Lösung.

<template>
  <div class="form-group">
    <label :for="id">(( Etikett ))</label>
    <!-- pay attention to v-on="listeners" -->
    <input
      :id="id"
      v-bind="$attrs"
      :value="value"
      class="base-input"
      v-on="listeners"
    >
</div>
</template>

<script>
export default (
  name: 'BaseInput',
  inheritAttrs: false,
  props: ['value', 'label', 'id'],
  computed: (
    listeners() (
      return (
        ...this.$listeners,
        input: event => this.$emit('input', event.target.value)
      );
    )
  )
);
</script>

Es gibt eine neue berechnete Eigenschaft, die die Komponente für Hörer zurückgibt und den Eingabe-Hörer hinzufügt. Wir verwenden diese berechnete Eingabe, indem wir einfach schreiben v-on="Zuhörer".

Verwenden Sie den Watcher mit der Option immediate anstelle des erstellten Hooks und des Watchers zusammen

Oft holen wir einige Daten bei einem erstellten (oder montierten) Hook, aber dann müssen wir diese Daten bei jeder Änderung einer Eigenschaft holen, z. B. die aktuelle Seite der Paginierung. Einige neigen dazu, es so aufzuschreiben:

<script>
export default (
  name: 'SomeComponent',
  watch: (
    someWatchedProperty() (
      this.fetchData();
    )
  ),
  created() (
    this.fetchData();
  ),
  methods: (
    fetchData() (
      // handle fetch data
    )
  )
);
</script>

Natürlich, es funktioniert, aber... Es ist nicht der beste Ansatz, nicht einmal ein guter. Also, lassen Sie uns prüfen, wie wir dies umgestalten können, Ein Beispiel für einen nicht so schlechten Ansatz:

<script>
export default (
name: 'SomeComponent',
watch: (
  someWatchedProperty: 'fetchData'
),
  created() (
    this.fetchData();
  ),
  methods: (
    fetchData() (
      // handle fetch data
    )
  )
);
</script>

Die obige Version ist besser, weil eine weitere Methode nicht notwendig ist, wir haben nur eine Methode genannt, die aufgerufen werden soll, um watchedProperty zu ändern.

Ein noch besserer Ansatz:

<script>
  export default (
    name: 'SomeComponent',
    watch: (
      someWatchedProperty: (
        handler: 'fetchData',
        immediate: true
      )
    ),
    methods: (
      fetchData() (
        // handle fetch data
      )
    )
  );
</script>

Wir sind den created-Hook losgeworden. Durch das Hinzufügen der Option "immediate" wird der Komponentenaufruf der fetchData-Methode unmittelbar nach dem Beginn der Beobachtung ausgeführt (ein wenig vor dem created-Hook und nach beforeCreated), sodass er anstelle des created-Hooks verwendet werden kann.

Vue.js Tipps Zusammenfassung

Diese Tipps werden Ihre Bewerbung nicht perfekt machen, aber wenn Sie sie befolgen, werden Sie schnell die Qualität Ihres Codes zu verbessern. Ich hoffe, Sie finden auch in den oben genannten Beispielen etwas Interessantes.

Beachten Sie, dass einige von ihnen für die Zwecke des Artikels vereinfacht wurden.

Lesen Sie mehr:

JavaScript ist völlig tot. Irgendein Kerl im Internet

Ein tieferer Blick auf die beliebtesten React-Haken

Software-Projekte, bei denen Sie JavaScript verwenden können