Was sind die Vor- und Nachteile von Vue? Warum es verwenden?

Die Vor- und Nachteile sind: einfach, schnell, leistungsstark und modulfreundlich; IE8 wird jedoch nicht unterstützt und ist nicht suchmaschinenfreundlich, was Auswirkungen auf die Suchmaschinenoptimierung hat. Gründe für die Verwendung: Vue ist ein Tool, das die Entwicklungskosten senken und die Entwicklungseffizienz verbessern kann. Es kann Entwicklern dabei helfen, sich von mühsamen DOM-Vorgängen zu befreien. Sie müssen sich nur auf die Datenänderungen konzentrieren. Der Inhalt der Ansicht ändert sich entsprechend und es ist nicht erforderlich, die DOM-Elemente manuell zu bearbeiten, um ihn zu ändern. Und die Komponentisierung von Vue ist sehr hilfreich bei der Verbesserung der Code-Wiederverwendung und der Zerlegung großer Projekte.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

Was ist Vue?

Vue (ausgesprochen /vjuː/, ähnlich wie view) ist ein JavaScript-Framework zum Erstellen von Benutzeroberflächen. Es basiert auf Standard-HTML, CSS und JavaScript und bietet ein deklaratives, komponentenbasiertes Programmiermodell, das Sie bei der effizienten Entwicklung von Benutzeroberflächen unterstützt. Ob einfache oder komplexe Schnittstelle, Vue kann alles.

Das Folgende ist ein einfaches Beispiel:

import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

Ergebnisanzeige

Das obige Beispiel zeigt zwei Kernfunktionen von Vue:

• Deklaratives Rendering: Vue erweitert eine Suite basierend auf der Standard-HTML-Vorlagensyntax, die es uns ermöglicht um die Beziehung zwischen dem endgültigen Ausgabe-HTML und dem JavaScript-Status deklarativ zu beschreiben.

• Reaktionsfähigkeit: Vue verfolgt automatisch den JavaScript-Status und aktualisiert das DOM reaktionsschnell, wenn es sich ändert.

Vor- und Nachteile von Vue.js

Vorteile:

1. Einfach: Die offizielle Dokumentation ist sehr klar und einfacher zu erlernen als Angular.

2. Schnell: DOM in der asynchronen Stapelverarbeitung aktualisieren.

3. Zusammensetzung: Stellen Sie Ihre Anwendung mit entkoppelten, wiederverwendbaren Komponenten zusammen.

4. Kompakt: ~18 KB min+gzip und keine Abhängigkeiten.

5. Leistungsstark: Ausdrücke und berechnete Eigenschaften ohne Deklaration von Abhängigkeiten.

6. Modulfreundlich: Es kann über NPM, Bower oder Duo installiert werden. Es zwingt nicht Ihren gesamten Code, den verschiedenen Vorschriften von Angular zu folgen, und die Verwendungsszenarien sind flexibler.

Nachteile:

• unterstützt IE8 nicht.

  Vue.js unterstützt IE8 und niedriger nicht, da Vue.js ECMAScript 5-Funktionen verwendet, die IE8 nicht emulieren kann. Vue.js unterstützt alle ECMAScript 5-kompatiblen Browser.

• vue ist eine einseitige Seite, die nicht suchmaschinenfreundlich ist und sich negativ auf die Suchmaschinenoptimierung auswirkt. Daher ist sie nicht für die offizielle Website des Unternehmens geeignet. Die Pfade zweier Vue-Routen (Seiten) lauten beispielsweise wie folgt: index.html#aaa und index.html#bbb, aber für Suchmaschinen handelt es sich bei beiden um dieselbe Seite, nämlich index.html. Auf diese Weise können Suchmaschinen Ihre Seite nicht einbinden.

Warum Vue.js verwenden?

Die Verwendung eines neuen Frameworks und einer neuen Bibliothek dient eigentlich der Lösung der Probleme, auf die wir in der aktuellen Entwicklung stoßen, oder der Verbesserung der Entwicklungseffizienz. Die Kosten für alle sind Zeit, und gute Tools können uns helfen, Zeit zu sparen. Aus Projektsicht hilft es uns auch, Kosten zu sparen. Vue.js ist ein Tool, das die Entwicklungskosten senken und die Entwicklungseffizienz verbessern kann. Es kann uns dabei helfen, uns von mühsamen DOM-Vorgängen zu befreien. Nachdem wir während der Entwicklung die Regeln für die richtige Ansicht und die richtigen Daten festgelegt haben, müssen wir nur noch auf Änderungen in den Daten achten, und der Inhalt der Ansicht ändert sich entsprechend, ohne dass wir DOM-Elemente manuell manipulieren müssen, um sie zu ändern .

Darüber hinaus hat sich das Front-End-Entwicklungsmodell allmählich in Richtung Komponentisierung verlagert, und das Konzept der Webkomponenten ist nach und nach zum Standard geworden, mit eigenen unabhängigen HTML-Fragmenten, JS-Dateien und CSS-Stilen, sodass Sie dies nicht tun Sie müssen sich Sorgen um sich selbst machen, wenn Sie Business-Code verwenden. Vue.js hat auch eine eigene Implementierung dieses Konzepts implementiert, was sehr hilfreich ist, um die Wiederverwendung von Code zu verbessern und große Projekte aufzulösen.

Einige Vorteile von vue:

1. Das Steuerelement wird automatisch an die Daten gebunden, Sie können den Datenwert direkt in den Daten verwenden, ohne die $("#id") zu verwenden. Es ist viel bequemer, eine Reihe von Methoden zu verwenden, um den Wert eines Steuerelements zu ermitteln, und es ist viel bequemer, dem Steuerelement Werte zuzuweisen. Sie müssen nur den Wert der Daten ändern, und das Steuerelement ändert sich automatisch der Wert. Wandeln Sie komplexe Schnittstellenoperationen in Datenoperationen um.

Zum Beispiel kann der folgende Code eine dynamische Verwaltung der Liste im Auswahlsteuerelement realisieren:

HTML-Code:

<el-select v-model="mType" style="flex: 1;">
　　<el-option v-for="(item,index) in enums" :label="item.label" :value="item.value" :key="index"></el-option>
</el-select>

js-Code:

data(){
    return{
　　　　mType:'',
　　　　enums:[{value:0,label:'未婚'},{value:1,label:'已婚'}]
　　}
}

Wenn Sie den Inhalt der Auswahlliste ändern müssen, geben Sie Nein ein Sie müssen nicht mehr ändern, um mit Dom zu arbeiten. Sie müssen lediglich die Werte der Aufzählungen ändern. Wenn sich der vom Steuerelement ausgewählte Wert ändert, wird er automatisch an das mType-Datenfeld gebunden.

2. Seitenwertübertragung und Statusverwaltung

Vue bietet viele Methoden zur Auswahl für die Übertragung von Seitenwerten, z. B. die Verwendung von Unterkomponentenattributen zur Übertragung von Werten, die Verwendung von Seiten-URL-Parametern zur Übertragung von Werten oder die Verwendung globaler Statusverwaltungsmethoden von vuex zur Übertragung von Werten auf Seiten usw . Wenn die Seite in der nativen Entwicklung über mehrere Parameter verfügt, sind die Übertragung und Initialisierung von Seitenwerten viel komplizierter. Vue hingegen speichert die Parameter direkt im Objekt und speichert ein Objekt nur direkt für die Eigenschaften der Unterkomponente oder des Vuex.

3. Modulare Entwicklung, modulares Update

Wie im zweiten Punkt erwähnt, kann es tatsächlich auf modulare Entwicklung erweitert werden. Beispielsweise verfügt eine Listenseite über Funktionen zum Hinzufügen und Ändern. Zu diesem Zeitpunkt können wir die Daten der Hauptkomponente ändern, indem wir auf die Unterkomponente verweisen, beispielsweise nach der Änderung eines Teils Bei der Aktualisierung der Daten müssen wir gleichzeitig die Hauptkomponente ändern, möchten jedoch die Seitenzahl und die Suchbedingungen der ursprünglichen Listenseite nicht ändern. Wenn Sie zur Implementierung die native Entwicklung verwenden, müssen Sie eine Menge Geschäftslogik schreiben, um Parameter wie die Suchbedingungen und Seitenzahlen der vorherigen Seite zu speichern. Wenn Sie jedoch mit Vue entwickeln, wird dies sehr einfach.

4. Code-Lesbarkeit

vue ist von Natur aus in der Lage, Komponenten zu entwickeln, sodass unterschiedliche Funktionen grundsätzlich in verschiedenen Modulen geschrieben werden, sodass die Lesbarkeit des Codes sehr hoch ist. Wenn ein Neuling ein altes Projekt übernimmt, kann er im Grunde den zu ändernden Code finden und innerhalb von ein oder zwei Tagen Änderungen vornehmen.

5. Fügen Sie basierend auf den leistungsstarken NodeJS eine neue Komponentenbibliothek hinzu, die mit einem einfachen npm-Befehl installiert werden kann. Wenn ich beispielsweise die Axios-Komponente verwenden muss, kann ich sie direkt mit npm install axios installieren Ich kann die Axios-Komponente verwenden. Schüler, die mit Maven vertraut sind, können das NPM-Tool leicht verstehen.

6. Der Haupt-Routing-, Sub-Routing-, Hauptseiten- und Unterkomponenten-Ansatz ermöglicht es uns, vollständig auf Iframes zu verzichten. Studenten, die über das Frontend geschrieben haben, wissen alle, dass die Benutzererfahrung aufgrund der Bildlaufleisten von Iframes und der Interaktivität zwischen Unterseiten und anderen Seiten immer noch weitaus weniger benutzerfreundlich ist als bei einer Single-Page-Architektur. Und die Verwendung von Vue ist sehr einfach und bequem, um feste Layouts wie Systemmenüs und Navigation zu implementieren.

7. CSS-Modularisierung: Jede Komponente kann denselben Stilnamen verwenden, aber unterschiedliche Stilattribute haben. Beispielsweise sind die Schaltflächen von Komponente A und Komponente B beide an class="btn" gebunden, aber in den beiden Komponenten können wir zwei unterschiedliche BTN-Stilattribute implementieren, ohne sich gegenseitig zu beeinflussen.

Verwandte Empfehlungen: vue.js Video-Tutorial

Das obige ist der detaillierte Inhalt vonWas sind die Vor- und Nachteile von Vue? Warum es verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!