Einführung in Vue.js: Vue-cli und Lifecycle Hooks

Dies ist der dritte Teil einer fünfteiligen Reihe über das JavaScript-Framework Vue.js. Wir werden Vue-cli behandeln und etwas mehr über reale Entwicklungsprozesse sprechen. Dies ist keine vollständige Anleitung, sondern eher ein Überblick über die Grundlagen, um Ihnen den Einstieg zu erleichtern, damit Sie Vue.js kennenlernen und verstehen können, was das Framework zu bieten hat.

Vue-cli und Build-Prozesse

Wenn Sie den letzten Abschnitt über Vue.js-Komponenten und Props noch nicht gelesen haben, empfehle ich Ihnen dringend, dies zu tun, bevor Sie diesen Abschnitt lesen, da sonst einige der besprochenen Punkte den Kontext vermissen lassen.

Vue bietet ein sehr schönes CLI, das Ihnen den Einstieg mit einer Auswahl von Build-Tools und einem wirklich schönen, einfachen Starter-Boilerplate ermöglicht. Es ist ein tolles Werkzeug. Bevor Sie vue-cli installieren, sollten Sie sicherstellen, dass Ihre Node- und npm- oder Yarn-Versionen auf dem neuesten Stand sind. Zuerst möchten Sie vue-cli installieren (das -g hilft Ihnen bei der globalen Installation)

$ npm install -g vue-cli

Es stehen Ihnen viele Builds zur Verfügung, aber in unserem Beispiel verwenden wir webpack

$ vue init webpack <projektname>

Sie können die Befehle durchlaufen, die die Ausgabe Ihnen gibt. Diese helfen Ihnen, in das Verzeichnis zu wechseln, alles zu installieren, Ihre `package.json`-Datei einzurichten und dann schließlich einen lokalen Entwicklungsserver unter localhost:8080 mit dem Befehl zu starten

$ npm run dev

Sie sind startklar! Ich liebe es, wie sauber die Einrichtung ist. Sie beginnen mit einer App-Datei in Ihrem `/src/`-Verzeichnis mit einer `Hello.vue`-Datei im `/components/`-Verzeichnis. Das ist sehr gut, da Sie bereits sehen können, wie Sie diese Dateien einrichten würden und wie Importe und Exporte funktionieren könnten.

Lassen Sie uns kurz auf diese neue `.vue`-Dateiendung eingehen, denn wenn Sie noch nicht mit Vue gearbeitet haben, werden Sie ihr noch nicht begegnet sein.

In Ihrer `.vue`-Datei können Sie alles unterbringen, was Sie für Ihre Komponente benötigen. Wir müssen unsere Vorlagen nicht mehr in <script type="text/x-template"> einpacken, stattdessen erstellen wir jetzt semantischer Dateien, die dieser Logik folgen.

<template>
  <div>
     <!-- Write your HTML with Vue in here -->	
  </div>
</template>

<script>
  export default {
     // Write your Vue component logic here
  }
</script>

<style scoped>
  /* Write your styles for the component in here */
</style>

Ich habe ein Repository mit Vue-Snippets für Sublime Text erstellt, um Boilerplate wie diese schnell für `.vue`-Dateien zu generieren (dies ist es, was das Snippet vbase ausgeben würde). Es gibt auch dieses für Atom (obwohl es Version 1+ angibt und Vue bei v2 ist) und dieses für VS Code.

Ein paar Dinge, die hier zu beachten sind: Genau wie in React müssen Sie genau ein umschließendes Tag zurückgeben. Hier habe ich ein div verwendet. Ich habe auch <g>-Elemente in SVG verwendet. Es kann alles sein, aber die gesamte Vorlage muss in dem *einen* Tag eingeschlossen sein.

Sie werden sehen, dass wir hier export default verwenden, um unsere Skripte wie die Datenfunktion oder Methoden zu schreiben, die wir zuvor verwendet haben. Wenn wir jedoch Komponenten als Kinder in diesem `.vue`-Dokument verwenden würden, müssten wir sie auch importieren (mehr dazu gleich).

Sie können auch sehen, dass wir einen speziellen Wert scoped für das Style-Tag haben. Dies ermöglicht es uns, die Stile für diese Komponente ganz einfach auf diese Komponente zu beschränken. Wir könnten auch nur <style> verwenden, und es würde Stile für die gesamte Anwendung erstellen. Ich erstelle typischerweise eine Basis-Stylesheet für die gesamte Anwendung mit gemeinsamen Stilen wie Schriftarten und Zeilenhöhen, die ich mit Hilfe von vue-style-loader in das <style>-Tag der App.vue-Datei importiere (`@import`). Ich verwende dann das <style scoped>-Tag für sehr spezifische Stile für die Vorlage, wenn es erforderlich ist, aber wirklich, jedem das Seine! Das Schöne ist, dass Vue-cli Ihnen erlaubt zu entscheiden, wie Sie es organisieren, und Sie keine zusätzlichen Abhängigkeiten oder Module hinzufügen müssen, um unsere Stile auf diese Weise zu beschränken. *Herzaugen*.

Wir haben zuvor kurz über Slots gesprochen. Wenn wir Slots in Vue-Komponenten mit den Scoped Style Tags verwenden, gelten diese für die Komponente, die die Slots hat. Das ist so hilfreich, weil Sie Komponenten austauschen und das Erscheinungsbild sehr einfach ändern können. *noch mehr Herzaugen*

Ich muss sagen, dass die Arbeit innerhalb jeder einzelnen `.vue`-Datei für mein HTML, meine Stile und meine JS in Bezug auf den Entwicklungs-Workflow außerordentlich hilfreich war. Ich liebe es, dass die Dinge ausreichend getrennt sind, um jedes Stück klar zu sehen, und doch nah genug beieinander liegen, dass ich nicht den Kontext wechseln muss. Es beschleunigt meine Entwicklung, und ich habe festgestellt, dass das Markup ziemlich semantisch bleibt.

Sie werden vielleicht auch bemerken, dass Ihr Syntax-Highlighter `.vue`-Dateien nicht automatisch erkennt, also habe ich dieses für Sublime Text installiert.

Hier ist die grundlegendste Art, Komponenten in eine Datei zu importieren/exportieren (vimport:c in vue-sublime snippets)

import New from './components/New.vue';

export default {
  components: {
    appNew: New
  }
}

Für ein realistischeres Beispiel betrachten wir ein Muster des letzten Weinetiketten-Demos, das wir verwendet haben, mit den Komponenten, die in ihre eigenen Vorlagen aufgeteilt sind.

App.vue

<template>
  <div class="container">

  <main>
      <component :is="selected">
        <svg class="winebottle" aria-labelledby="title" xmlns="http://www.w3.org/2000/svg" viewBox="0 155 140 300">
          ...
      </svg>
      </component>
    </main>

    <aside>
      <h4>Name your Wine</h4>
      <input v-model="label" maxlength="18">
      <div class="button-row">
        <h4>Color</h4>
        <button @click="selected ='appBlack', labelColor = '#000000'">Black Label</button>
        <button @click="selected ='appWhite', labelColor = '#ffffff'">White Label</button>
        <input type="color" v-model="labelColor" defaultValue="#ff0000">
      </div>
    </aside>

  </div>
</template>

<script>
  import Black from './components/Black.vue'
  import White from './components/White.vue'
  ...
  export default {
      data: function () {
        return {
          selected: 'appBlack',
          label: 'Label Name',
          ...
        };
      },
      components: {
          appBlack: Black,
          appWhite: White,
          ...
      }
  }
</script>

<style>
  @import "./assets/style.css";
</style>

Schwarze Komponente

<template>
  <div>
    <slot></slot>
  </div>
</template>

<style scoped>
  .label {
    fill: black;
  }
  .bottle, .wine-text {
    fill: white;
  }
  .flor {
    fill: #ccc;
  }
  .bkimg {
    filter:url(#inverse)
  }
</style>

Beachten Sie, dass ich die Komponente hier verwende, um jeden Slot unterschiedlich zu stylen. Das ist eine wirklich schöne Arbeitsweise, aber es ist nur eine Möglichkeit. Es gibt unendlich viele Möglichkeiten, Ihre Anwendung mit Komponenten, Slots und Props zu komponieren. Der Code hier zeigt auch nur einen Teil dessen, was passiert. Ich habe ein Repository für Sie erstellt, das von Anfang an mit Vue-cli erstellt wurde. Ich empfehle dringend, Vue-cli parallel zu dieser Lektüre zu verwenden und einige Komponenten zu erstellen und Zustände mit Props auf einfache Weise zu übergeben, nur um sich an den Workflow zu gewöhnen. Es ist sehr intuitiv und schnell, sobald Sie die anfängliche Einrichtung hinter sich haben!

Lifecycle Hooks

Bevor wir über Lifecycle Hooks sprechen, müssen wir ein wenig zurückgehen und über das virtuelle DOM sprechen, das ich im ersten Artikel erwähnt habe. Ich habe erwähnt, dass Vue.js ein virtuelles DOM hat, aber nicht wirklich, was es tut.

Wenn Sie mit etwas wie jQuery arbeiten, hören Sie im Wesentlichen auf das DOM und ändern Dinge basierend auf diesen Aktualisierungen. Wir verbringen viel Zeit damit, zu überprüfen, was das DOM tut, und den Zustand dort zu speichern. Im Gegensatz dazu ist ein virtuelles DOM eine abstrakte Darstellung eines DOM, so etwas wie eine Kopie, aber in diesem Fall wird es unsere Master-Kopie sein. Wenn wir mit dem Zustand so arbeiten, wie wir es in diesen Artikeln mit Vue getan haben, erstellen wir den Zustand selbst und beobachten dann, wann sich der Zustand ändert.

Wenn eine Vue-Instanz aktualisiert wird, prüft Vue, ob sie sich von dem unterscheidet, was wir zuvor hatten. Wenn sie sich tatsächlich unterscheidet, ruft sie einige dieser Lifecycle-Methoden auf und aktualisiert das tatsächliche DOM mit den Änderungen. Dies dient der Effizienz, auf diese Weise aktualisiert das DOM nur das, was es unbedingt benötigt.

Die Lifecycle Hooks bieten Ihnen eine Methode, mit der Sie etwas genau zu verschiedenen Zeitpunkten im Lebenszyklus einer Komponente auslösen können. Komponenten werden gemountet, wenn wir sie instanziieren, und umgekehrt abgemountet, z. B. wenn wir sie in einer v-if/v-else-Anweisung umschalten.

Einige der Ihnen zur Verfügung stehenden Hooks sind: beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, activated, deactivated, beforeDestroy und destroyed. Die API-Dokumentation beschreibt jeden gut, wenn Sie tiefer eintauchen möchten. Hier ist eine kleine Demo, die zeigt, wie einige von ihnen funktionieren (prüfen Sie die Konsole).

const Child = {
  template: '#childarea',
  beforeCreate() {
    console.log("beforeCreate!");
  }, 
 ...
};

new Vue({
  el: '#app',
  data() {
    return {
      isShowing: false 
    }
  },
  methods: {
    toggleShow() {
      this.isShowing = !this.isShowing;
    }
  },
  components: {
    appChild: Child
  }
});

<div v-if="isShowing">
  <app-child></app-child>
</div>

Siehe den Pen von Sarah Drasner.

Beachten Sie, dass wir hier v-if anstelle von v-show verwenden, da v-if die Komponente tatsächlich mountet und demountet, während v-show nur die Sichtbarkeit umschaltet (aber sie bleibt gemountet und im DOM). Ebenso wird <keep-alive></keep-alive> nicht gemountet oder demountet, sondern aktiviert und deaktiviert, da die Komponente gemountet bleibt, aber nicht in Gebrauch ist.

So wie die Methoden, die auf der Komponente verfügbar sind, automatisch gebunden werden, binden sich auch Lifecycle Hooks automatisch an die Instanz, sodass Sie den Zustand und die Methoden der Komponente verwenden können. Auch hier müssen Sie nicht console.log verwenden, um herauszufinden, worauf sich this bezieht! *herzlichste Augen* Aus diesem Grund sollten Sie keine Pfeilfunktion für eine Lifecycle-Methode verwenden, da sie die übergeordnete Komponente zurückgibt, anstatt Ihnen eine schöne Out-of-the-Box-Bindung zu bieten.

Im Folgenden verschiebe ich eine Menge Elemente, wenn jede Komponente ursprünglich gemountet wird. Daher verwende ich den mounted-Hook, um die entsprechende Animation für jede Komponente auszulösen. Möglicherweise müssen Sie die Schaltfläche "Wiederholen" unten links drücken, um die Startanimation zu sehen.

Siehe den Pen Vue Weather Notifier von Sarah Drasner (@sdras) auf CodePen.

 mounted() {
    let audio = new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/rain.mp3'),
        tl = new TimelineMax();

    audio.play();
    tl.add("drops");

    //drops in
    tl.staggerFromTo("#droplet-groups g path", 0.3, {
      drawSVG: "0% -10%"
    }, {
      drawSVG: "100% 110%",
      repeat: 3,
      repeatDelay: 1,
      ease: Sine.easeIn
    }, 0.5, "drops");
 …
}

Es gibt auch wunderschöne und ausgeklügelte <transition>- und <transition-group>-Komponenten, die Vue anbietet und die wir in diesem Demo an anderer Stelle verwenden. Wir werden diese und warum und wann wir sie verwenden sollten, im letzten Beitrag der Serie über Animationen behandeln.