Zusammenfassung häufiger Fragen im Vue-Interview (mit Antwortanalyse)

In diesem Artikel werden einige Vue-Interviewfragen mit Ihnen geteilt (mit Antwortanalyse). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Die in dem Artikel enthaltenen Informationen stammen aus dem Internet und sind eine persönliche Zusammenfassung. Bei Verstößen kontaktieren Sie mich bitte, um sie zu löschen.

1. Verständnis von MVVM

MVVM ist die Abkürzung für Model-View-ViewModel.

Modell stellt das Datenmodell dar, und im Modell kann auch Geschäftslogik für Datenänderung und -betrieb definiert werden.

View stellt die UI-Komponente dar, die für die Konvertierung des Datenmodells in eine Benutzeroberfläche zur Anzeige verantwortlich ist.

ViewModel Überwacht Änderungen in Modelldaten, steuert das Ansichtsverhalten und verwaltet die Benutzerinteraktion. Ein einfaches Verständnis ist ein Objekt, das Ansicht und Modell synchronisiert und Modell und Ansicht verbindet.

Unter der MVVM-Architektur gibt es keine direkte Verbindung zwischen View und Model. Stattdessen interagieren sie über ViewModel. Die Interaktion zwischen Model und ViewModel erfolgt in beide Richtungen, sodass Änderungen in den View-Daten mit dem Model und den Model-Daten synchronisiert werden Änderungen werden auch sofort in der Ansicht angezeigt.

ViewModel verbindet die Ansichtsebene und die Modellebene durch bidirektionale Datenbindung. Die Synchronisierung zwischen Ansicht und Modell erfolgt vollständig automatisch und ohne menschliches Eingreifen, sodass sich Entwickler nur auf die Geschäftslogik konzentrieren müssen und nicht manuell arbeiten müssen DOM muss nicht auf die Synchronisierung des Datenstatus geachtet werden. Die Verwaltung des komplexen Datenstatus wird vollständig von MVVM verwaltet.

2. Vue implementiert die bidirektionale Datenbindung

Vue implementiert die bidirektionale Datenbindung hauptsächlich durch: Verwendung von Datenhijacking in Kombination mit dem Herausgeber-Abonnenten-Modell und Kaperung jedes Objekts durch Object.defineProperty() Der Setter und Getter der Eigenschaft veröffentlichen Nachrichten an Abonnenten, wenn sich Daten ändern, und lösen entsprechende Listening-Rückrufe aus. Wenn Sie ein einfaches Javascript-Objekt als Datenoption an eine Vue-Instanz übergeben, durchläuft Vue seine Eigenschaften und konvertiert sie mithilfe von Object.defineProperty in Getter/Setter. Die Getter/Setter sind für den Benutzer nicht sichtbar, aber intern ermöglichen sie Vue, Abhängigkeiten zu verfolgen und Änderungen zu benachrichtigen, wenn auf Eigenschaften zugegriffen und diese geändert werden. (Teilen von Lernvideos: vue-Video-Tutorial) Die bidirektionale Datenbindung von

vue verwendet MVVM als Eingang zur Datenbindung, integriert Observer, Compile und Watcher, verwendet Observer zur Überwachung der Datenänderungen Ihres eigenen Modells und verwendet Compile Um die Anweisungen der Kompilierungsvorlage zu analysieren (in Vue wird sie zum Parsen von {{}} verwendet) und schließlich den Beobachter verwenden, um eine Kommunikationsbrücke zwischen dem Beobachter und Compile aufzubauen, um Datenänderungen zu erreichen –> Aktualisierungen anzeigen, interaktive Änderungen anzeigen ( Eingabe)—>gt ;Das Datenmodell ändert den bidirektionalen Bindungseffekt.

3. Parameterübertragung zwischen Vue-Komponenten

1. Übergabe von Werten zwischen übergeordneter und untergeordneter Komponente: Übergabe der untergeordneten Komponente an die übergeordnete Komponente: $ Die Emit-Methode übergibt Parameter

2. Die Datenübertragung zwischen Nicht-übergeordneten und untergeordneten Komponenten und Geschwisterkomponenten übergibt Werte

eventBus, der ein Ereigniszentrum erstellen soll, das einer Übertragungsstation entspricht Wird zum Senden und Empfangen von Ereignissen verwendet. Wenn das Projekt relativ klein ist, ist dies angemessener.

4. Der Unterschied zwischen v-show und v-if

• v-show ist CSS-Umschaltung, v-if ist vollständige Zerstörung und Neuerstellung .
  Verwenden Sie
• Verwenden Sie v-show, wenn Sie häufig wechseln, verwenden Sie v-if, wenn es während der Laufzeit nur wenige Änderungen gibt
  v-if='false' v-if ist bedingtes Rendern, es wird nicht gerendert, wenn es falsch ist
5. Vues Lebenszyklus

beforeCreate

created

beforeMount

montiert

beforeUpdate

updated(Aktualisiert) Wird nach dem erneuten Rendern und Patchen des virtuellen DOM aufgrund von Datenänderungen aufgerufen. Beim Aufruf wurde das Komponenten-DOM aktualisiert, sodass DOM-abhängige Vorgänge ausgeführt werden können. In den meisten Fällen sollte jedoch eine Statusänderung während dieses Zeitraums vermieden werden, da dies zu einer Endlosschleife von Aktualisierungen führen kann. Dieser Hook wird beim serverseitigen Rendern nicht aufgerufen.

beforeDestroy (vor der Zerstörung) Wird aufgerufen, bevor die Instanz zerstört wird. Die Instanz ist weiterhin vollständig verfügbar.

destroyed (nach der Zerstörung) Wird aufgerufen, nachdem die Instanz zerstört wurde. Nach dem Aufruf werden alle Ereignis-Listener entfernt und alle untergeordneten Instanzen zerstört. Dieser Hook wird beim serverseitigen Rendern nicht aufgerufen.

1. Was ist der Vue-Lebenszyklus?

Antwort: Der Prozess von der Erstellung bis zur Zerstörung einer Vue-Instanz ist der Lebenszyklus. Eine Reihe von Prozessen vom Erstellen, Initialisieren von Daten, Kompilieren von Vorlagen, Mounten von Dom→Rendering, Aktualisieren→Rendering und Zerstörung werden als Lebenszyklus von Vue bezeichnet.

2. Welche Rolle spielt der Vue-Lebenszyklus?

Antwort: In seinem Lebenszyklus gibt es mehrere Ereignis-Hooks, die es uns erleichtern, bei der Steuerung des Prozesses der gesamten Vue-Instanz eine gute Logik zu entwickeln.

3. Wie viele Phasen gibt es im Vue-Lebenszyklus?

A: Es kann insgesamt in 8 Phasen unterteilt werden: vor/nach der Erstellung, vor/nach dem Laden, vor/nach dem Update, vor/nach der Zerstörung.

4. Welche Hooks werden beim ersten Laden der Seite ausgelöst?

Antwort: Es wird Folgendes ausgelöst: beforeCreate, erstellt, beforeMount, gemountet.

5. In welchem ​​Zyklus wird das DOM-Rendering abgeschlossen?

Antwort: Das DOM-Rendering ist im gemounteten Zustand abgeschlossen.

5. Array-Verwendung der gebundenen Klasse

• Objektmethodev-bind:class="{'orange': isRipe, 'green': isNotRipe}"v-bind:class="{'orange': isRipe, 'green': isNotRipe}"
• 数组方法v-bind:class="[class1, class2]"
• 行内 v-bind:style="{color: color, fontSize: fontSize+'px' }"
Array-Methodev-bind:class="[class1, class2]"

inlinev-bind:style="{color: color, fontSize: fontSize+'px' }"

6. Der Unterschied zwischen berechnetem Attribut und überwachtem Attribut

Handler tief Ist es tief? Wird es sofort ausgeführt?

Zusammenfassung

Wenn sich einige Daten mit anderen Daten ändern müssen, wird empfohlen, berechnete Daten zu verwenden. Wenn es eine allgemeine Reaktion auf Datenänderungen gibt, wird empfohlen, beim Ausführen einiger Geschäftslogik- oder asynchroner Vorgänge einen Watcher zu verwenden.

7 Routing-Implementierung von Vue: Hash-Modus und Verlaufsmodus mittleres Symbol „#“, # und die Zeichen nach # werden Hashes genannt und mit window.location.hash gelesen. Funktionen: Obwohl der Hash in der URL enthalten ist, ist er nicht in der HTTP-Anfrage enthalten, die zur Steuerung von Browseraktionen verwendet wird , Es ist für die serverseitige Sicherheit nutzlos und der Hash lädt die Seite nicht neu. Im Hash-Modus wird nur der Inhalt vor dem Hash-Symbol in die Anfrage einbezogen, z. B. http://www.xxx.com. Daher wird 404 für das Backend nicht erreicht, selbst wenn keine vollständige Abdeckung der Route erreicht wird Fehler zurückgegeben werden.

history übernimmt die neuen Funktionen von HTML5 und bietet zwei neue Methoden: pushState(), replaceState() zum Ändern des Browser-Verlaufsstapels und das popState-Ereignis zur Überwachung von Statusänderungen. Im Verlaufsmodus muss die URL des Front-Ends mit der URL übereinstimmen, die die Anfrage an das Back-End tatsächlich initiiert, z. B. http://www.xxx.com/items/id. Wenn im Backend die Routing-Verarbeitung für /items/id fehlt, wird ein 404-Fehler zurückgegeben.

(Die Version wird ständig aktualisiert, die folgenden Unterschiede sind möglicherweise nicht sehr korrekt. Ich verwende in meiner Arbeit nur Vue und bin mit Angular und React nicht sehr vertraut)

1 Der Unterschied zu AngularJS

:

Beide unterstützen Befehle: integrierte Befehle und benutzerdefinierte Befehle; beide unterstützen Filter: integrierte Filter und benutzerdefinierte Filter unterstützen beide die bidirektionale Datenbindung;

{
 path: '/details/:id'
 name: 'Details'
 components: Details
}

Das obige ist der detaillierte Inhalt vonZusammenfassung häufiger Fragen im Vue-Interview (mit Antwortanalyse). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!