11 häufige Vuejs-Interviewfragen, kennen Sie sie? Aus der Spalte Vue-Interviewfragen
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.
Bevor Datenbeobachtungs- und Initialisierungsereignisse begonnen haben
Vollständige Datenbeobachtung, Betrieb von Attributen und Methoden, Initialisierungsereignisse, el-Attribut wurde noch nicht angezeigt
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.
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.
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.
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.
Wird aufgerufen, bevor die Instanz zerstört wird. Die Instanz ist weiterhin vollständig verfügbar.
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.
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.
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.
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.
Antwort: Es wird Folgendes ausgelöst: beforeCreate, erstellt, beforeMount, gemountet.
Antwort: Das DOM-Rendering ist im gemounteten Zustand abgeschlossen.
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, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show').innerHTML = newValue
}
})
document.addEventListener('keyup', function (e) {
obj.txt = e.target.value
})
</script>
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.)
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.
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. „
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
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.
Die durch Mutationen definierten Methoden ändern dynamisch den Status oder die Daten im Vuex-Speicher.
Berechnete Eigenschaften ähnlich wie Vue, die hauptsächlich zum Filtern einiger Daten verwendet werden.
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.
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')
}
}
})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';
}
}
}
})Vue.directive('dir2', {
inserted(el) {
console.log(el);
}
})<p> </p><p></p> <p></p>
<p>
<input>
{{msg| capitalize }}
</p>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)
}
}
})2.v Der Unterschied zwischen -if und v-show
3. Der Unterschied zwischen Route und Router
4. Was sind die beiden Kerne von vue.js?
5. Mehrere häufig verwendete Anweisungen in Vue
6 Was sind die häufig verwendeten Modifikatoren in Vue?
wird aufgerufen, wenn ein Ereignis auftritt. 7. Kann v-on mehrere Methoden binden?
8 Welche Rolle spielt der Schlüsselwert in 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.
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.
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!
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
vue v-wenn
Der Unterschied zwischen vue2.0 und 3.0
So übergeben Sie einen Wert an die Vue-Komponente
Der Unterschied zwischen vue3.0 und 2.0
Vue allgemeine Anweisungen
Was sind die am häufigsten verwendeten Anweisungen in Vue?
Der Unterschied zwischen mpvue und vue
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
