Neun häufige Vuejs-Interviewfragen, kennen Sie sie?

11 häufige Vuejs-Interviewfragen, kennen Sie sie? Aus der Spalte Vue-Interviewfragen

1. MVVM verstehen?

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 UI zur Anzeige verantwortlich ist.
ViewModel überwacht Änderungen in Modelldaten, steuert das Ansichtsverhalten und verwaltet die Benutzerinteraktion. Ein einfaches Verständnis ist, dass es sich um ein Objekt handelt, 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 View-Daten mit dem Model synchronisiert werden Modelländerungen an Daten werden auch sofort in der Ansicht widergespiegelt.
ViewModel verbindet die Ansichtsebene und die Modellebene durch bidirektionale Datenbindung, und die Synchronisierung zwischen Ansicht und Modell erfolgt vollständig automatisch ohne menschliches Eingreifen, sodass sich Entwickler nur auf die Geschäftslogik konzentrieren müssen und keine manuellen Vorgänge benötigen Auf die Synchronisierung des Datenstatus muss nicht geachtet werden. Die Verwaltung des komplexen Datenstatus wird vollständig von MVVM verwaltet.

2. Der Lebenszyklus von Vue

beforeCreate (vor der Erstellung)

Bevor Datenbeobachtungs- und Initialisierungsereignisse begonnen haben

erstellt (nach der Erstellung)

Vollständige Datenbeobachtung, Betrieb von Attributen und Methoden, Initialisierungsereignisse, el-Attribut wurde noch nicht angezeigt

beforeMount (vor dem Laden)

wird aufgerufen, bevor die Montage beginnt Die entsprechende Renderfunktion wird zum ersten Mal aufgerufen. Die Instanz hat die folgende Konfiguration abgeschlossen: Kompilieren Sie die Vorlage und generieren Sie HTML aus den Daten in den Daten und der Vorlage. Beachten Sie, dass der HTML-Code zu diesem Zeitpunkt noch nicht auf der Seite bereitgestellt wurde.

gemountet (nach dem Laden)

Wird aufgerufen, nachdem el durch das neu erstellte vm.$el ersetzt und in der Instanz gemountet wurde. Die Instanz hat die folgende Konfiguration abgeschlossen: Ersetzen Sie das DOM-Objekt, auf das das el-Attribut zeigt, durch den oben kompilierten HTML-Inhalt. Vervollständigen Sie die Darstellung des HTML-Codes in der Vorlage in der HTML-Seite. Während dieses Prozesses wird eine Ajax-Interaktion durchgeführt.

beforeUpdate (vor dem Update)

Wird aufgerufen, bevor die Daten aktualisiert werden, was geschieht, bevor das virtuelle DOM erneut gerendert und gepatcht wird. In diesem Hook können weitere Zustandsänderungen vorgenommen werden, ohne dass ein zusätzlicher Re-Rendering-Prozess ausgelöst wird.

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.

zerstört (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 Beginn der Erstellung über die Initialisierung von Daten, das Kompilieren von Vorlagen, das Mounten von Dom → Rendern, Aktualisieren → Rendern und Zerstören werden als Lebenszyklus von Vue bezeichnet.

2. Welche Rolle spielt der Vue-Lebenszyklus?

Antwort: Es gibt mehrere Ereignis-Hooks in seinem Lebenszyklus, was es uns erleichtert, bei der Steuerung des Prozesses der gesamten Vue-Instanz eine gute Logik zu entwickeln.

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

Antwort: 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.

3. Das Prinzip von Vue zur Implementierung der bidirektionalen Datenbindung: Object.defineProperty()

Vue implementiert die bidirektionale Datenbindung hauptsächlich durch die Verwendung von Datenhijacking in Kombination mit dem Publisher-Subscriber-Modell . Verwenden Sie Object.defineProperty(), um die Setter und Getter jeder Eigenschaft zu kapern, Nachrichten an Abonnenten zu veröffentlichen, wenn sich Daten ändern, und entsprechende Abhörrückrufe auszulösen. 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.

Vues bidirektionale Datenbindung verwendet MVVM als Eingang zur Datenbindung und integriert Observer, Compile und Watcher. Es verwendet Observer, um die Datenänderungen seines eigenen Modells zu überwachen, und verwendet Compile, um Vorlagenanweisungen zu analysieren und zu kompilieren (vue wird zum Parsen von {{}} verwendet) und verwendet schließlich den Watcher, um eine Kommunikationsbrücke zwischen dem Beobachter und dem Kompilieren aufzubauen, um eine Datenänderung -> Ansicht, Aktualisierung, interaktive Änderung (Eingabe) -> Änderung des Datenmodells in beide Richtungen zu erreichen .

    <p>
        <input>
        </p><p></p>
    

<script>
    var obj = {}
    Object.defineProperty(obj, &#39;txt&#39;, {
        get: function () {
            return obj
        },
        set: function (newValue) {
            document.getElementById(&#39;txt&#39;).value = newValue
            document.getElementById(&#39;show&#39;).innerHTML = newValue
        }
    })
    document.addEventListener(&#39;keyup&#39;, function (e) {
        obj.txt = e.target.value
    })
</script>

4. Parameterübertragung zwischen Vue-Komponenten

1. Übergeben Sie Werte zwischen der übergeordneten Komponente und der untergeordneten Komponente.
Übergabe der übergeordneten Komponente an die untergeordnete Komponente: Die untergeordnete Komponente empfängt Daten über die Props-Methode.
Untergeordnete Komponente An die übergeordnete Komponente übergeben: Die $emit-Methode übergibt Parameter
2. Datenübertragung zwischen Nicht-übergeordneten und untergeordneten Komponenten, Geschwisterkomponenten übergeben Werte
eventBus, der ein Ereigniszentrum erstellt, das einem entspricht Übergabestation, mit der Ereignisse weitergegeben und Ereignisse empfangen werden können. Wenn das Projekt relativ klein ist, ist dies angemessener. (Obwohl viele Leute die direkte Verwendung von VUEX empfehlen, hängt dies von den Anforderungen ab. Technologie ist nur ein Mittel, und das Erreichen des Ziels ist der König.)

5. Routing-Implementierung von Vue: Hash-Modus und Verlaufsmodus

Hash-Modus:

Im Browser werden das Symbol „#“, # und die Zeichen nach # als Hash bezeichnet, die mit window.location.hash gelesen werden.
Eigenschaften: Obwohl Hash ist in der URL, aber nicht in der HTTP-Anfrage enthalten; wird zur Steuerung von Browseraktionen verwendet, 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 aufgenommen, z. B. http://www.xxx.com. Daher gilt für das Backend, auch wenn keine vollständige Abdeckung des Routings erreicht wird Es wird der Fehler 404 zurückgegeben.

Verlaufsmodus:

Verlauf übernimmt die neuen Funktionen von HTML5 und bietet zwei neue Methoden: pushState(), replaceState() zum Ändern des Browser-Verlaufsstapels und das popState-Ereignis zur Überwachung des 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 offizielle Website von Vue-Router beschreibt es so: „Um in diesem Modus gut zu spielen, ist jedoch auch Hintergrundkonfigurationsunterstützung erforderlich … Daher müssen Sie auf der Serverseite eine Kandidatenressource hinzufügen, die alle Situationen abdeckt: wenn die Die URL stimmt mit keiner statischen Ressource überein. Es sollte dieselbe index.html-Seite zurückgegeben werden, von der Ihre App abhängt. „

6. Die Hook-Funktion von Vue Routing

ist nur Wird verwendet, um den Status zu lesen und im Speicher abzulegen. Die Möglichkeit, den Status zu ändern, ist eine synchrone Sache, die in Aktionen gekapselt werden sollte.
Führen Sie den Store in main.js ein und fügen Sie ihn ein. Ein neuer Verzeichnisspeicher wird erstellt,...exportieren.
Zu den Szenarien gehören: in Single-Page-Anwendungen der Status zwischen Komponenten, Musikwiedergabe, Anmeldestatus, Hinzufügen zum Warenkorb

Status

Vuex verwendet also einen einzelnen Statusbaum Jede Anwendung enthält nur eine Speicherinstanz, ein einzelner Statusbaum steht jedoch nicht im Widerspruch zur Modularität. Der gespeicherte Datenstatus kann nicht direkt geändert werden.

Mutationen

Die durch Mutationen definierten Methoden ändern dynamisch den Status oder die Daten im Vuex-Speicher.

Getter

Berechnete Eigenschaften ähnlich wie Vue, die hauptsächlich zum Filtern einiger Daten verwendet werden.

Aktion

Aktionen können als Änderung der Datenverarbeitungsmethode in eine asynchrone Datenverarbeitungsmethode verstanden werden. Einfach ausgedrückt handelt es sich um einen asynchronen Datenverarbeitungsvorgang. Die Ansichtsebene verteilt Aktionen über store.dispath.

Module

Wenn das Projekt besonders komplex ist, kann jedes Modul seinen eigenen Status, seine eigene Mutation, seine eigene Aktion und seine eigenen Getter haben, wodurch die Struktur sehr klar und einfach zu verwalten ist.

//store实例
const store = new Vuex.Store({ 
    state: {
        count: 0
    },
    mutations: {                
        increment (state) {
            state.count++
        }
    },
    actions: { 
        increment (context) {
            context.commit('increment')
        }
    }
})

7. Wie füge ich benutzerdefinierte Anweisungen zu vue-cli hinzu?

1. Lokale Anweisungen

var app = new Vue({
    el: '#app',
    data: {    
    },
    // 创建指令(可以多个)
    directives: {
        // 指令名称
        dir1: {
            inserted(el) {
                // 指令中第一个参数是当前使用指令的DOM
                console.log(el);
                // 对DOM进行操作
                el.style.width = '200px';
                el.style.height = '200px';
                el.style.background = '#000';
            }
        }
    }
})

2. Globale Anweisungen

Vue.directive('dir2', {
    inserted(el) {
        console.log(el);
    }
})

8 ?

HTML-Code:

<p>
    </p><p></p>
    <p></p>

JS-Code:

<p>
     <input>
     {{msg| capitalize }}
</p>

Globaler Definitionsfilter

var vm=new Vue({
    el:"#app",
    data:{
        msg:''
    },
    filters: {
      capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }
})

9. Interviewfragen, die in einem Satz beantwortet werden können

1.css funktioniert nur in der aktuellen Komponente

Antwort: Schreiben Sie einfach „scoped“ in das Style-Tag. Zum Beispiel:

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

Antwort: v-if rendert je nach Bedingungen, v-show ist der Block oder keine Anzeige

3. Der Unterschied zwischen Route und Router

Antwort:

Router ist ein „Routing-Instanz“-Objekt, das Routing-Sprungmethoden, Hook-Funktionen usw. enthält.

4. Was sind die beiden Kerne von vue.js?

Antwort: Datengesteuertes Komponentensystem

5. Mehrere häufig verwendete Anweisungen in Vue

Antwort: v-for, v-if, v-bind, v- on , v-show, v-else

6 Was sind die häufig verwendeten Modifikatoren in Vue?

Antwort: .prevent: Das Submit-Ereignis lädt die Seite nicht mehr neu. .stop: Verhindert, dass das Click-Ereignis sprudelt das untergeordnete Element; .capture: Ereignisüberwachung,

wird aufgerufen, wenn ein Ereignis auftritt. 7. Kann v-on mehrere Methoden binden?

Antwort: Ja

8 Welche Rolle spielt der Schlüsselwert in Vue?

Antwort: Wenn Vue.js v-for verwendet, um die Liste der gerenderten Elemente zu aktualisieren, wird standardmäßig die Strategie der „In-Place-Wiederverwendung“ verwendet. Wenn die Reihenfolge der Datenelemente geändert wird, verschiebt Vue die DOM-Elemente nicht, um sie an die Reihenfolge der Datenelemente anzupassen, sondern verwendet einfach jedes Element dort wieder und stellt sicher, dass jedes Element angezeigt wird, das an einem bestimmten Index gerendert wurde. Die Hauptfunktion von key besteht darin, das virtuelle DOM effizient zu aktualisieren.

9. Was sind die berechneten Eigenschaften von Vue?

Antwort: Wenn Sie zu viel Logik in die Vorlage einfügen, wird die Vorlage überlastet und schwer zu warten. Wenn eine komplexe Verarbeitung von Daten erforderlich ist und möglicherweise mehrmals verwendet wird, versuchen Sie, berechnete Attribute zu verwenden. Vorteile: ① Macht die Datenverarbeitungsstruktur klar; ② Abhängig von den Daten werden die Datenaktualisierungen und die Verarbeitungsergebnisse automatisch aktualisiert. ③ Das ​​berechnete Attribut verweist auf die VM-Instanz Attributname direkt; ⑤ Die häufig verwendete Getter-Methode kann auch die Set-Methode verwenden, um die Daten zu ändern. ⑥ Im Vergleich zu Methoden werden Methoden unabhängig von der Änderung der abhängigen Daten neu berechnet. Wenn die abhängigen Daten jedoch unverändert bleiben, werden sie berechnet werden aus dem Cache bezogen und nicht neu berechnet.

10. Single-Page-Anwendungen wie Vue und ihre Vor- und Nachteile

Antwort: Vorteile: Das Ziel von Vue ist es, eine reaktionsfähige Datenbindung und kombinierte Ansichtskomponenten durch eine möglichst einfache API zu erreichen. Der Kern ist ein reaktives Datenbindungssystem. MVVM, datengesteuert, komponentenorientiert, leichtgewichtig, prägnant, effizient, schnell und modulfreundlich.
Nachteile: Unterstützt keine Browser niedrigerer Versionen, sondern zumindest IE9; die SEO-Optimierung ist nicht förderlich (wenn Sie SEO unterstützen möchten, wird empfohlen, die Komponenten über den Server zu laden). Zum ersten Mal auf die Homepage gehen; Sie können die Navigationsschaltflächen des Browsers nicht verwenden und müssen selbst vorwärts und rückwärts navigieren.

11. Wie definiere ich die dynamische Route des Vue-Routers?

Antwort: Fügen Sie in der Datei index.js im Routerverzeichnis /:id hinzu Pfadattribut, erhalten mit der params.id des Router-Objekts.

Das obige ist der detaillierte Inhalt vonNeun häufige Vuejs-Interviewfragen, kennen Sie sie?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!