Was ist der Unterschied zwischen Komponentisierung und Modularisierung in Vue?

Der Unterschied zwischen Komponentisierung und Modularisierung: Die Modularisierung ist aus Sicht der Codelogik unterteilt. Sie erleichtert die Entwicklung auf Codeebene und stellt sicher, dass die Funktionen jedes Funktionsmoduls konsistent sind. Die Komponentisierung ist die Planung aus der Perspektive der UI-Schnittstelle; die Komponentisierung des Frontends erleichtert die Wiederverwendung von UI-Komponenten.

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

Der Ursprung der Modularität

In den Anfängen der Webentwicklung wurde js als Skriptsprache für einfache Formularüberprüfungen oder Animationsimplementierungen verwendet. Die Codemenge war relativ gering und musste nur geschrieben werden im Skript-Tag

Mit dem Aufkommen asynchroner Ajax-Anfragen bildete sich nach und nach eine Front-End- und Back-End-Trennung. Der Client muss immer mehr Dinge erledigen und auch die Menge an Code nimmt zu. Um den dramatischen Anstieg der Codemenge zu bewältigen, organisieren wir den Code normalerweise zur Wartung in mehreren JS-Dateien

Aber es wird einige Probleme geben: wie das Problem globaler Variablen mit demselben Namen

Verwendung von Funktionsabschlüssen kann das Problem von Variablenkonflikten lösen. In anderen Dateien definierte Variablen können jedoch nicht verwendet werden. Die Modularisierung besteht aus zwei Kernen: Export und Import. Erfahren Sie mehr über die modulare Entwicklung von es6. Schlüsselwörter Export (Export) Import (Import)

Kapseln Sie beispielsweise ein Modul, das Ajax sendet. In einigen Fällen enthält ein Modul eine bestimmte Funktion. Wir möchten diese Funktion nicht selbst benennen. Sie können Export verwenden default

export default address
//只能默认一个

import jjj from "./aaa.js"
//可以自己命名，不要加{}

//导入 import

Warum Modularität verwenden? Die Vorteile der Verwendung von Modularität

Natürlich können alle Funktionen der Seite ohne die Verwendung modularer Entwicklung realisiert werden, aber dies erhöht den Druck auf die Serveranforderung und verringert die Benutzererfahrung Die Anfrage enthält alle angeforderten Daten. Was ist, wenn der Benutzer sie nicht benötigt? Ist eine solche Anfrage noch wirksam? Natürlich hat es keine Auswirkungen, daher kann diese Art von Problem durch die Verwendung der Idee der modularen Entwicklung gelöst werden

Sprechen Sie einfach über die Vorteile der Verwendung modularer Entwicklung

1 Klare Organisation und einfache Wartung

2 Machen Sie nicht alles auf einmal. Alle Datenanfragen werden zurückgegeben und die Benutzererfahrung ist gut.

3 Module sind voneinander isoliert, aber interne Mitglieder können über bestimmte Schnittstellen verfügbar gemacht werden, oder sie können sich auf andere Module verlassen

Vergleich zwischen Komponentisierung und Modularisierung

Viele Menschen verstehen Komponentisierung und Modularisierung als eins. Natürlich sind sie an vielen Stellen ähnlich.

1. Die Komponentisierung ist eine unabhängige und wiederverwendbare Code-Organisationseinheit. Das Komponentensystem ist eine der Kernfunktionen von Vue, die es Entwicklern ermöglicht, große Anwendungen mit kleinen, unabhängigen und oft wiederverwendbaren Komponenten zu erstellen -basierte Entwicklung Es kann die Effizienz der Anwendungsentwicklung, die Testbarkeit, die Wiederverwendbarkeit usw. erheblich verbessern.

3 Die Verwendung von Komponenten erfolgt normalerweise nach der Konfiguration write Die Komponenten sind eher Komponentenkonfigurationen als Komponenten. Sie basieren auf VueComponent und erweitern Vue. Zu den gängigen Komponentenisierungstechnologien gehören Attribut-Requisiten, Slots usw Wird hauptsächlich für die Komponentenkommunikation, Erweiterung usw. verwendet.

7. Komponenten sollten eine hohe Kohärenz und eine geringe Kopplung aufweisen fließen.

Der Unterschied zwischen Komponentisierung und Modularisierung:

Modularisierung: Sie ist aus Sicht der Codelogik unterteilt; sie erleichtert die hierarchische Entwicklung von Code und stellt sicher, dass jedes Funktionsmodul eine einzige Funktion hat

Komponentisierung: Ja Teilen aus der Perspektive der UI-Schnittstelle und Komponentenisierung des Front-Ends, um die Wiederverwendung von UI-Komponenten zu erleichtern Art von

 <div id="app">
        <!-- 如果要使用组件，直接把组件的名称，以HTML标签形式，引入到页面中即可 -->
    <mycom1></mycom1>
    </div>

<script>
        var com1 = Vue.extend({
        template:&#39;<h3>使用Vue.extend 来创建全局的Vue组件</h3>&#39;
        })
        //1,使用Vue.component(&#39;组件名&#39;，创建出来的组件模板对象)
        Vue.component(&#39;mycom1&#39;,com1)
 </script>

Hinweis: Unabhängig davon, wie die Komponente erstellt wird, muss und kann der Vorlageninhalt, auf den das Vorlagenattribut der Komponente verweist, ein und nur ein Stammelement haben. Die dritte Methode eignet sich am besten für die Entwicklung von Arbeitsprojekten

[Verwandte Empfehlungen: vuejs-Video-Tutorial]

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen Komponentisierung und Modularisierung in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!