10 Dinge, die du über das Vue.js Frontend Framework wissen musst

Mit dem kontinuierlichen Aufstieg der Frontend-JavaScript-Frameworks, einschließlich des neuen Vue.js 3, ist es unerlässlich geworden, mit ihnen Schritt zu halten und alles über ihre neuen Features zu verstehen.

In diesem Artikel werden wir uns mit Vue.js 3 und seinen neu hinzugefügten Features beschäftigen. Diese neuen Features machen Vue.js noch robuster und machen es zu einem großartigen Framework, das du für dein nächstes Projekt in Betracht ziehen solltest. Du erfährst im Detail 10 Dinge, die du über Vue.js wissen solltest und wie es dir helfen wird, skalierbare und hochperformante Frontend-Anwendungen zu erstellen.

Bist du bereit? Los geht’s!

Was ist Vue.js?

Laut Evan You, dem Schöpfer von Vue.js:

„Vue.js ist eine flexiblere, weniger eigenwillige Lösung. Es ist nur ein Interface-Layer, so dass du es als leichtes Feature in Seiten verwenden kannst, anstatt eines vollwertigen SPA.“

Er wollte ein Frontend-Framework schaffen, das so mächtig wie Angular ist, aber auch „leichter“ und flexibler, ohne all die unnötigen Plugins und Konzepte, die mit Angular einhergehen.

Das Ergebnis war Vue.js, das heute eines der beliebtesten Frontend-Frameworks ist.

Warum Entwickler Vue.js verwenden

Verschiedene Gründe treiben einen Entwickler dazu an, eine bestimmte Technologie zu verwenden. Lass uns besprechen, warum wir denken, dass du Vue.js lernen solltest.

Für den Anfang ist Vue.js eines der einfachsten Frameworks für die meisten Entwickler, da dieses Framework JavaScript verwendet. Daher kann jeder, der grundlegende JavaScript-Kenntnisse hat, mit Vue.js entwickeln.

Das Vue CLI Tool in Kombination mit anderen Frontend Development Tools macht das Einrichten von Vue.js zum Kinderspiel. Es ist standardmäßig mit einigen Funktionen eingerichtet, aber du kannst auch Code mit einer DRY (Don’t Repeat Yourself) Logik und Struktur erstellen.

Reaktivität ist auch in Vue.js eingebaut. Das bedeutet, dass die Echtzeit-Funktionalität, die auf dem Angular-Framework beliebt war, mit Vue.js ein Kinderspiel ist. Zum Beispiel kannst du ganz einfach eine einfache Direktive wie v-if in deiner Vue.js Anwendung anwenden.

Als nächstes wollen wir die primären Vor- und Nachteile von Vue.js diskutieren.

Vorteile und Nachteile von Vue.js

Vue.js ist das zweitbeliebteste Framework, das heute verwendet wird. Schauen wir uns an, was es bei Webentwicklern beliebt macht und was sie abstößt.

Vue.js Vorteile

Wir beginnen damit, die positiven Aspekte von Vue.js zu erkunden.

Winzige Größe

Vue.js hat eine winzige Downloadgröße von ca. 18 KB, was im Vergleich zu anderen Frameworks mit großen Größen hervorragend ist. Mit dieser Größe wirkt sich Vue.js jedoch positiv auf das SEO und die UX deiner Frontend-Anwendung aus.

Single-File-Komponente und Lesbarkeit

Vue.js verwendet eine komponentenbasierte Architektur, wodurch große Code-Blöcke in kleinere Komponenten aufgeteilt werden. Außerdem ist in Vue.js alles eine Komponente, und jede Komponente wird mit HTML, CSS und JavaScript geschrieben, was die Lesbarkeit und Einfachheit fördert.

Solides Tooling System

Vue.js unterstützt viele Tools für die Frontend-Entwicklung direkt aus der Box heraus, mit wenig bis gar keiner Konfiguration von dir. Zum Beispiel unterstützt Vue.js Tools wie Babel und Webpack. Darüber hinaus bietet es Unit-Tests, End-to-End-Testing-Bibliotheken, flexible und einfach zu bedienende Routing-Systeme, State-Manager, Server-Side-Rendering (SSR) und mehr.

Einfach zu benutzen

Wenn du Vue.js bereits benutzt hast, wirst du zustimmen, dass es sehr einfach zu benutzen ist. Es modernisiert den üblichen Webentwicklungsansatz und macht es für jeden Anfänger einfach, direkt einzusteigen und sich mit nur wenigen Übungen wohl zu fühlen.

Vue.js Nachteile

Nachdem wir nun die Vorteile behandelt haben, wollen wir uns nun den Nachteilen von Vue.js widmen.

Reaktivität – Komplexität

Die Implementierung von Two-Way-Binding in Vue.js ist ein praktisches Tool, um Vue.js Komponenten zu verwalten. Two-way binding bezieht sich auf das Teilen von Daten zwischen einer Komponentenklasse und ihrem Template, es wurde so entwickelt, dass wenn sich Daten an einer Stelle ändern, es automatisch die anderen aktualisiert.

Es gibt jedoch ein Problem, wie die Reaktivität funktioniert, während das Reaktivitätssystem nur die Datenstücke wiedergibt, die ausgelöst wurden. Manchmal kommt es zu Fehlern beim Lesen der Daten, so dass es erforderlich ist, die Daten zu glätten. Du kannst dir dieses Problem auf der Webseite von Vue.js durchlesen und erfahren, wie es behoben wird.

Sprachbarriere

Ursprünglich wurde Vue.js hauptsächlich von Chinesen angenommen, wobei große Unternehmen wie Xiaomi und Alibaba dabei halfen, das Framework populär zu machen und eine Nachfrage auf dem Arbeitsmarkt zu schaffen. Allerdings waren viele Foren, Diskussionskanäle und ähnliches hauptsächlich auf Chinesisch, was die Akzeptanz für nicht-muttersprachliche Entwickler erschwerte.

Heute ist dies nicht mehr der Fall, da Vue.js sich weiterentwickelt hat, um Support in vielen Sprachen zu bieten, aber es gibt einige Sprachen, die weniger Support haben als andere.

Risiken der Über-Flexibilität

Wie bereits erwähnt, ist Vue.js sehr flexibel und einfach zu benutzen. Daher ist es leicht, überall jede Menge Spaghetti-Code zu haben, da jeder in einem Unternehmensteam unterschiedliche Meinungen darüber haben kann, wie Dinge zu tun sind.

Aus den oben genannten Vor- und Nachteilen von Vue.js hast du vielleicht schon einige Features entdeckt, die du liebst und einige, die für dich nicht gut funktionieren werden.

10 Dinge, die du über Vue.js wissen solltest

Im Folgenden findest du die zehn Dinge, die du über Vue.js wissen solltest und warum es essentiell ist, sie zu kennen.

Berechnete Eigenschaften

Eine berechnete Eigenschaft ist eines der meistgenutzten Features in Vue.js. Eine berechnete Eigenschaft ermöglicht es dir, Eigenschaften zu erstellen, die modifiziert und manipuliert werden können und Daten auf eine effiziente und lesbare Weise anzeigen.

Es ist praktisch, wenn du viele kleine Methoden für Dinge wie Formatierung, Änderung von Werten oder einen umfangreichen Prozess, den du in bestimmten Situationen auslösen musst, wiederholen willst.

Berechnete Eigenschaften helfen dabei, übermäßig viel Logik in deinem Template zu entfernen. Zu viel dieser Logik kann dazu führen, dass dein Code schnell aufgebläht und schwer zu pflegen wird.

Angenommen, du möchtest eine Zeichenkette in Großbuchstaben formatieren, so könntest du es tun:

<template>
  <div>
    <p> I love {{ value.toUpperCase() }} </p>
  </div>
</template>

Was passiert, wenn du die value variable an 50 verschiedenen Stellen ändern musst? Aufgeblasen, richtig? Nun, berechnete Eigenschaften sind hier um zu helfen:

<template>
  <div>
    <p> I love {{ value }} </p>
  </div>
</template>
<script>
  export default {
    computed:{
      value(){
        return this.value.toUpperCase()
      }
    }
  }
</script>

Du kannst einfach toUpperCase() in toLowerCase() ändern, und es wird alles von einem Punkt aus reflektiert.

Ereignisbehandlung

Vue.js macht die Kommunikation zwischen Child und Parent mit Hilfe von $emit und v-on zu einem Kinderspiel. Es wird mühelos und einfach, die Kommunikation zwischen Komponentenhierarchien zu handhaben.

Die $emit Funktion akzeptiert zwei Parameter: einen String für den Namen und einen optionalen Wert, der ausgesendet werden soll.

Der v-on:event-name wird in der untergeordneten Komponente verwendet, um das Ereignis zu empfangen, das von der übergeordneten Komponente ausgesendet wurde:

<template>
  <section>
    <button @click="onClick">Add </button>
  </section>
</template>
<script>
export default {
  name: "AddEvent",
  methods: {
    onClick() { 
      this.$emit('add', this.data);
    }
  }
}
</script>

Sobald du den Add-Button auslöst, löst die onClick-Methode das $emit-Ereignis aus, welches das Add-Ereignis an eine Child-Komponente sendet, die auf das Add-Ereignis hört.

Lass uns einen Blick darauf werfen, wie man auf ein Ereignis lauscht:

<template>
  <section>
  <p v-show="showSaveMsg">This component is listening to the ADD event</p>
  <add-event v-on:add="onAdd"></add-event>
  </section>
</template>
<script>
export default {
  data(){
    return {
      showSaveMsg: false
    }
  },
  components:{
    AddEvent: () => import('./AddEvent')
  },
  methods: {
    onAdd() { 
        this.showSaveMsg = true;
    }
  }
}
</script>

Der obige Code hört auf das add-Ereignis und reagiert, indem er den Wert von showSaveMsg auf true ändert, was die Nachricht erneut anzeigt.

Lazy Loading / Async Komponenten

Lazy Loading ist einer der besten Performance Hacks für Vue.js, bei dem Komponenten asynchron oder on-demand hinzugefügt und gerendert werden, was die Dateigröße, die HTTP Request-Response Zeit und so weiter deutlich reduziert.

Lazy Loading wird mit dynamischen Webpack-Importen erreicht, die auch Code-Splitting unterstützen.

Vue.js erlaubt Lazy Loading von Komponenten und kann mit den folgenden Skripten global erreicht werden:

import Vue from "vue";
Vue.component("new-component", () => import("./components/NewComponent.vue"));

Du kannst es lokal mit einer Komponente wie unten erreichen:

<template>
  <div>
    <component></component>
  </div>
</template>
<script>
export default {
  components: {
    'Component': () => import('./Component')
  }
}
</script>

Globale Komponenten

Wir können eine signifikante Wiederverwendbarkeit in Vue.js mit globalen Komponenten erreichen, wobei du eine Komponente einmal registrierst und sie dann überall innerhalb deiner Vue.js-Instanz verwendest.

Globale Komponenten sind ein wichtiges Feature und können dir viel Zeit ersparen, wenn du Komponenten jedes Mal einzeln registrierst, aber es kann leicht missbraucht werden, wenn du alle Komponenten global registrierst. Wenn du alle Komponenten global registrierst, kann das leicht zu einer großen Build-Größe führen, was zu schlechtem SEO und langsamerer Seitenladezeit führt.

Achte darauf, dass du immer globale Komponenten registrierst, die viele Anwendungsfälle in deinem Projekt haben, wie unten gezeigt:

import Vue from "vue";
Vue.component("new-component", () => import("./componetns/NewComponent.vue"));

Einzelne Dateikomponente

Eines der mächtigsten Features von Vue.js ist Components; es hilft dir, wesentliche HTML-Elemente, CSS und JavaScript zu erweitern, um wiederverwendbaren Code zu kapseln.

Komponenten können dabei helfen, große Projekte in kleinere, wiederverwendbare Teile zu zerlegen, die wir über das gesamte Projekt hinweg erweitern können, wodurch das DRY (Don’t Repeat Yourself) Prinzip des Software Engineerings gefördert wird.

Es kann Organisation und Kapselungen für große Projekte, wiederverwendbaren Code bieten und kann in .vue Dateien getrennt werden.

<template>
  <section>
    <button @click="onClick">Add</button>
  </section>
</template>

<script>
export default {
  name: "CustomButtom",
  methods: {
    onClick() { 
      this.$emit('add', this.data);
    }
  }
}
</script>

<style scoped>
  button{
    /** Button Styles */
  }
</style>

Die obigen Skripte erstellen eine benutzerdefinierte Button-Komponente, die wir in unserem Projekt wiederverwenden können. Jede Komponente hat ihr HTML, CSS und JavaScript.

Testen

Vue.js bietet eine der robustesten Testbibliotheken, die Unit-Tests mit Jest und Mocha oder End-to-End-Tests mit wenig bis gar keiner Konfiguration zu einem Kinderspiel machen.

Ein kurzer Blick in das Testen mit diesen Tools könnte sich für dich lohnen. Lass uns also die Installation, das Einrichten und das Testen eines Demoprojekts erkunden.

Wenn du das empfohlene Vue CLI Tool verwendest, um dein Projekt einzurichten, führe die folgenden Befehle aus:

vue add unit-jest //to run unit test with jest

npm install --save-dev @vue/test-utils

Als nächstes, nach dem Setup, füge den folgenden Code ein, der demonstriert, wie man eine einfache Komponente testet:

// Import the `mount()` method from Vue Test Utils
import { mount } from '@vue/test-utils'

// The component to test
const MessageComponent = {
  template: '<p>{{ message }}</p>',
  props: ['message']
}

test('displays a message', () => {
  // mount() returns a wrapped Vue component we can interact with
  const wrapper = mount(MessageComponent, {
    propsData: {
      msg: 'Welcome to our testing world'
    }
  })

  // Assert the rendered text of the component
  expect(wrapper.text()).toContain('Welcome to our testing world')
})

Die Vue Testing Library hat zwei großartige Optionen um deine Komponenten zu testen: Mount und Shallow.

Wenn du eine Komponente mit vollständiger Isolation testen willst, verwende die shallow Methode. Andernfalls, wenn du an einer Komponente mit Sub-Komponenten arbeiten musst, die du die Kommunikation sicherstellen willst, funktioniert die mount-Option sehr gut

Das leistungsstarke Vue CLI Tool

Vue CLI ist ein exzellentes CLI Tool und gibt jedem Vue Entwickler eine gute Portion Power. Mit ihm kannst du schnell jede Komponente isoliert testen. Das Tolle an Vue CLI ist, dass du eine Komponente vollständig isoliert entwickeln und testen kannst und trotzdem Zugriff auf Hot-Reloading hast, während du über diese spezielle Komponente iterierst.

Um das zu demonstrieren, installieren wir Vue CLI global:

npm install -g @vue/cli

Als nächstes kannst du jede Komponente testen, indem du den folgenden Befehl ausführst:

vue serve ./components/views/Home.vue

Wenn du eine bestimmte Komponente herausziehen möchtest, um sie z.B. mit deinen Kollegen zu teilen, kannst du das mit folgendem Befehl erreichen:

vue build --target lib --name goldenRule ./components/views/Home

Vue CLI ist sehr mächtig und kann eine Menge produktiver Zeit sparen, wenn du die Kunst der Verwendung beherrschst. Wenn du mehr erfahren willst, kannst du einen Blick in die offizielle Dokumentation werfen.

Props Management

Die Verwaltung von Props ist für die Vue-Komponente sehr wichtig, da sie auf verschiedene Arten erstellt werden kann. Du kannst Props auch validieren, mehrere Props erstellen und sie nach Bedarf modifizieren.

Um eine neue Eigenschaft in einer Vue Komponente zu erstellen, kannst du es auf verschiedene Arten tun. Angenommen du hast deine Komponente, dann musst du die isAdmin Eigenschaft erstellen.

Schauen wir uns die verschiedenen Möglichkeiten an, wie du es machen kannst:

<template>
  <section>
    <component v-if="isAdmin"></component>
  </section>
</template>
<script>
export default {
  name: 'Component',

 // One
  props: {
    isAdmin: {
      type: Boolean,
      default: false,
      required: true
    }
  },
 
 // Two
  props: ['isAdmin'],

 // Three
  props: {
    isAdmin: Boolean
  }

}
</script>

Die Validierung deiner Stütze ist sehr wichtig. Zum Glück ist es auch sehr einfach:

// ...

 // One
  props: {
    isAdmin: {
      default: false,
      required: true,
      validator: function(value) {
        return typeof === 'boolean';
      }
    }
  },

// ...

Schließlich ist das Ändern von Requisiten so einfach wie das Neuausrichten ihrer Werte:

//...

methods: {
  isAdmin() {
    this.isAdmin = true;
  }
}

//..

Um der Prop in einer übergeordneten Komponente einen Wert zuzuweisen:

<template>
  <section>
    <component :isAdmin="true"></component>
  </section>
</template>

Server-seitiges Rendering (SSR)

Bei all den großartigen Features und Vorteilen, die die Verwendung von Vue.js für die Erstellung von Frontend-Anwendungen mit sich bringt, ist Vue.js selbst immer noch eine clientseitige Bibliothek, die nur DOM-Elemente rendert und manipuliert.

Das serverseitige Rendering hilft clientseitigen Frameworks wie Vue.js besser zu funktionieren. Suchmaschinen-Crawler sehen beim Crawlen vollständig gerenderte Seiten deiner Webseite.

Damit deine Webseite schneller von Google und Bing indexiert wird, muss deine Webseite einen schnelleren und höheren Time-to-Content Score haben. Das ist es, was Server-side Rendering in Vue.js dir hilft zu erreichen.

Serverseitiges Rendering (SSR) ist eine beliebte Technik, um eine reguläre clientseitige Single-Page-App (SPA) auf dem Server zu rendern und dann eine vollständig gerenderte Seite an den Leser zu senden.

Wenn die Seite auf der Server-Seite gerendert wird, sendet sie es als Antwort an den Client. Somit ist jede Information bereits gerendert worden, während der Browser die Suchmaschinenseite anzeigt.

SSR in Vue.js zu erreichen, ist für Anfänger schwierig. Es wird einfacher sein, Nuxt.js zu benutzen, welches ein eingebautes SSR und eine sehr niedrige Lernkurve hat.

Deployment

Vue.js wird während der Entwicklung viele Warnungen, Fehler und aufgeblähte Dateigrößen präsentieren, aber diese Probleme verschwinden sofort, wenn du die Produktion zum Deployment einschaltest. Vue.js konfiguriert automatisch Webpack Build Tools, Minifizierungen, CSS Extraktion und Purging, Caching, Tracking von Laufzeitfehlern und mehr.

Kinsta-Kunden können die integrierte Funktion zur Code-Minifizierung nutzen, auf die sie direkt im MyKinsta-Dashboard zugreifen können. So können sie die automatische CSS- und JavaScript-Minifizierung mit einem einfachen Klick aktivieren.

Vue.js macht deinen Deployment-Prozess sehr einfach, indem es die Produktionsumgebung automatisch konfiguriert und einrichtet, ohne dass der Entwickler zusätzliche Schritte unternehmen muss.

Um deine Vue.js Anwendung zu deployen, kannst du dir die allgemeinen Anleitungen durchlesen.

Zusammenfassung

In diesem Artikel haben wir im Detail erforscht, was Vue.js ist, warum du es verwenden solltest, seine Vor- und Nachteile und die 10 Dinge, die du darüber wissen solltest.

Hoffentlich hast du dein Wissen über Vue.js erweitert, um skalierbare und hochperformante Frontend-Anwendungen zu erstellen.

Coding weiter!

Wenn du Fragen oder Anregungen hast, freuen wir uns, von dir zu hören. Sprich mit uns im Kommentarbereich unten!

Solomon Eseme

Ich bin Software-Ingenieurin und Erstellerin von Inhalten, die darauf ausgerichtet ist, leistungsstarke und innovative Produkte nach Best Practices und Branchenstandards zu entwickeln. Ich schreibe auch gerne darüber auf Masteringbackend.com. Folge mir auf X, LinkedIn und About Me

• Webseite
• LinkedIn
• Twitter