Häufige Fehler, die Sie bei der Arbeit mit Vue.js vermeiden sollten

Auf der Suche nach einem Front-End-Framework zum Ausprobieren habe ich mit React begonnen und dann Vue.js ausprobiert.

Leider , traf ich eine Menge Probleme mit Vue.js ganz am Anfang. In diesem Artikel möchte ich einige häufig auftretende Probleme erläutern, mit denen Sie sich möglicherweise bei der Arbeit mit Vue.js befassen müssen. Einige dieser Probleme mögen offensichtlich erscheinen, aber ich dachte mir, dass das Teilen meiner Erfahrungen jemandem helfen könnte.

Vorlagen-Compiler einschließen

Meine erste Ausgabe war ziemlich einfach. Das erste, was Sie tun müssen, um Vue.js zu verwenden, ist es zu importieren. Wenn Sie dem offiziellen Leitfaden folgen und eine Inline-Vorlage für Ihre Komponente verwenden, erhalten Sie eine leere Seite.

import Vue from 'vue'; var vm = new Vue({ el: '#vm', template: ' Hello World ', });

Beachten Sie, dass dieses Problem nicht auftritt, wenn Sie Vorlagen mit der Renderfunktion oder SFC (Single File Component) definieren.

Tatsächlich gibt es viele Vue-Builds. Der vom NPM-Paket exportierte Standardbuild ist der Nur-Laufzeit-Build . Der Template-Compiler wird nicht angezeigt.

Für einige Hintergrundinformationen funktioniert der Vorlagen-Compiler genau wie JSX for React. Es ersetzt Vorlagenzeichenfolgen durch Funktionsaufrufe, um einen virtuellen DOM-Knoten zu erstellen.

// #1: import full build in JavaScript file import Vue from 'vue/dist/vue.js'; // OR #2: make an alias in webpack configuration config.resolve: { alias: { vue: 'vue/dist/vue.js' } } // OR #3: use render function directly var vm = new Vue({ el: '#vm', render: function(createElement) { return createElement('div', 'Hello world'); } });

Bei SFCs tritt dieses Problem nicht auf. Sowohl vue-loader als auch vueify sind Tools für den Umgang mit SFCs. Sie generieren einfache JavaScript-Komponenten mithilfe der Renderfunktion, um die Vorlage zu definieren.

Verwenden Sie einen vollständigen Vue.js-Build, um Zeichenfolgenvorlagen in Komponenten zu verwenden.

Um dieses Problem zu beheben, geben Sie zusammenfassend den richtigen Build während des Imports an oder erstellen Sie einen Alias ​​für Vue in Ihrer Bundler-Konfiguration.

Sie sollten beachten, dass die Verwendung von Zeichenfolgenvorlagen die Leistung Ihrer App verringert, da die Kompilierung zur Laufzeit erfolgt.

Es gibt viele weitere Möglichkeiten, eine Komponentenvorlage zu definieren. Lesen Sie daher diesen Artikel. Außerdem empfehle ich die Verwendung der Renderfunktion in der Vue-Instanz.

Behalten Sie die Reaktivität der Immobilie

Wenn Sie React verwenden, wissen Sie wahrscheinlich, dass die Reaktivität vom Aufrufen der setStateFunktion abhängt, um den Wert von Eigenschaften zu aktualisieren.

Die Reaktivität mit Vue.js ist etwas anders. Es basiert auf dem Proxy der Komponenteneigenschaften. Getter- und Setter-Funktionen werden überschrieben und benachrichtigen Aktualisierungen des virtuellen DOM.

var vm = new Vue({ el: '#vm', template: ` {{ item.count }} `, data: { item: {} }, beforeMount () { this.$data.item.count = 0; }, methods: { updateCount () { // JavaScript object is updated but // the component template is not rendered again this.$data.item.count++; } } });

Im obigen Code-Snippet hat die Vue-Instanz eine Eigenschaft namens item(in Daten definiert). Diese Eigenschaft enthält ein leeres Literalobjekt.

Während der Komponenteninitialisierung erstellt Vue einen Proxy unter den an die Eigenschaft angehängten Funktionen getund . Somit wird das Framework Wertänderungen beobachten und schließlich reagieren.setitem

Die countEigenschaft ist jedoch nicht reaktiv, da sie zum Zeitpunkt der Initialisierung nicht deklariert wurde.

Tatsächlich erfolgt die Proxizierung nur zur Initialisierungszeit der Komponente, und die beforeMountLebenszyklusfunktion wird später ausgelöst .

Außerdem wird der itemSetter während der countDefinition nicht aufgerufen . Der Proxy wird also nicht ausgelöst und die countEigenschaft hat keine Überwachung.

beforeMount () { // #1: Call parent setter // item setter is called so proxifying is propaged this.$data.item = { count: 0 }; // OR #2: explicitly ask for watching // item.count got its getter and setter proxyfied this.$set(this.$data.item, 'count', 0); // "Short-hand" for: Vue.set(this.$data.item, 'count', 0); }

Wenn Sie die item.countBeeinträchtigung beibehalten beforeMount, wird durch einen Vue.setspäteren Anruf keine Uhr erstellt.

Das exakt gleiche Problem tritt auch bei Arrays auf, wenn eine direkte Beeinflussung unbekannter Indizes verwendet wird. In solchen Fällen sollten Sie Array-Proxy-Funktionen wie pushund bevorzugen slice.

Sie können diesen Artikel auch auf der Website des Entwicklers von Vue.js lesen.

Seien Sie vorsichtig mit SFC-Exporten

Sie können Vue regelmäßig in JavaScript-Dateien verwenden, aber Sie können auch einzelne Dateikomponenten verwenden. Es hilft, JavaScript-, HTML- und CSS-Code in einer einzigen Datei zu sammeln.

Bei SFCs ist der Komponentencode das Skript-Tag einer .vueDatei. Es ist immer noch in JavaScript geschrieben und muss die Komponente exportieren.

Es gibt viele Möglichkeiten, eine Variable / Komponente zu exportieren. Oft verwenden wir entweder direkte, benannte oder Standardexporte. Benannte Exporte verhindern, dass Benutzer die Komponente umbenennen. Es kann auch geschüttelt werden.

/* File: user.vue */ {{ user.name }} const User = { data: () => ({ user: { name: 'John Doe' } }) }; export User; // Not work export default User; // Works  /* File: app.js */ import {User} from 'user.vue'; // Not work import User from 'user.vue'; // Works (".vue" is required)

Die Verwendung von benannten Exporten ist nicht mit SFCs kompatibel. Beachten Sie dies!

Zusammenfassend kann das Exportieren einer benannten Variablen standardmäßig eine gute Idee sein. Auf diese Weise erhalten Sie explizitere Debug-Meldungen.

Mischen Sie keine SFC-Komponenten

Das Zusammenfügen von Code, Vorlage und Stil ist eine gute Idee. Abhängig von Ihren Einschränkungen und Meinungen möchten Sie möglicherweise die Trennung von Bedenken beibehalten.

Wie in der Vue-Dokumentation beschrieben, ist es mit SFC kompatibel.

Danach kam mir eine Idee in den Sinn. Verwenden Sie denselben JavaScript-Code und fügen Sie ihn in verschiedene Vorlagen ein. Sie können es als schlechte Praxis bezeichnen, aber es hält die Dinge einfach.

Beispielsweise kann eine Komponente sowohl schreibgeschützt als auch schreibgeschützt sein und dieselbe Implementierung beibehalten.

/* File: user.js */ const User = { data: () => ({ user: { name: 'John Doe' } }) }; export default User; /* File: user-read-only.vue */ {{ user.name }} /* File: user-read-write.vue */  

In diesem Snippet verwenden sowohl schreibgeschützte als auch schreibgeschützte Vorlagen dieselbe JavaScript-Benutzerkomponente.

Sobald Sie beide Komponenten importiert haben, werden Sie feststellen, dass es nicht wie erwartet funktioniert.

// The last import wins import UserReadWrite from './user-read-write.vue'; import UserReadOnly from './user-read-only.vue'; Vue.component('UserReadOnly', UserReadOnly); Vue.component('UserReadWrite', UserReadWrite); // Renders two times a UserReadOnly var vm = new Vue({ el: '#vm', template: ` ` });

Die in definierte Komponenteuser.jskann nur in einem einzigen SFC verwendet werden. Andernfalls überschreibt der zuletzt importierte SFC, der ihn verwendet, den vorherigen.

SFCs ermöglichen das Aufteilen von Code in separate Dateien. Sie können diese Dateien jedoch nicht in mehrere Vue-Komponenten importieren.

Verwenden Sie zur Vereinfachung den JavaScript-Komponentencode nicht in mehreren SFC-Komponenten. Die separate Codefunktion ist eine praktische Syntax, kein Entwurfsmuster.

Vielen Dank fürs Lesen. Ich hoffe, meine Erfahrung hat Ihnen geholfen, die Fehler zu vermeiden, die ich gemacht habe.

Wenn es nützlich war, klicken Sie bitte auf ? Knopf ein paar Mal, damit andere den Artikel finden und deine Unterstützung zeigen! ?

Vergessen Sie nicht, mir zu folgen, um über meine bevorstehenden Artikel informiert zu werden ?

Schauen Sie sich meine anderen Artikel an

➥ JavaScript

  • How to Improve Your JavaScript Skills by Writing Your Own Web Development Framework ?
  • Stop Painful JavaScript Debug and Embrace Intellij with Source Map

➥ React for beginners series

  • Begin with the first article
  • Get the best practices guide