Zusammenfassung der Fragen zum Vue-Interview (1)

Als beliebtestes Front-End-Framework ist Vue zur bevorzugten Technologie vieler Unternehmen und Programmierer geworden. Möglicherweise bereite ich mich kürzlich auch auf ein Interview vor, daher habe ich einige Informationen gefunden, um es zu integrieren

Sprechen Sie über Ihr Verständnis der MVVM-Prinzipien

• M-Modell, Modell stellt das Datenmodell dar, und die Geschäftslogik für Datenänderung und -betrieb kann auch im Modell definiert werden
• V-View, View stellt die UI-Komponente dar, die für die Umwandlung des Datenmodells in eine UI zur Anzeige verantwortlich ist
• VM-ViewModel, ViewModel überwacht Modelldatenänderungen, steuert das Ansichtsverhalten und verwaltet die Benutzerinteraktion. Ein einfaches Verständnis ist ein
  Objekt, das Ansicht und Modell synchronisiert und Modell und Ansicht verbindet.

[Schlüsselpunkt]: Sie müssen das MVVM-Prinzip von Vue verstehen und im Interview nachfragen!

Bitte sprechen Sie über das Prinzip der Antwortdaten

Verwenden Sie Object.defineProperty (), um mithilfe von Datenentführung in Kombination mit dem Publisher-Subscriber-Modell den Setter und Getter jeder Eigenschaft zu entführen

Standardmäßig verwendet Vue Object.defineProperty, um beim Initialisieren der Daten alle Eigenschaften für die Eigenschaften in den Daten neu zu definieren. Wenn die Seite die entsprechenden Eigenschaften erreicht, führt sie eine Abhängigkeitssammlung durch (sammeln Sie den Watcher in der aktuellen Komponente). Wenn die Eigenschaften Wenn Sie dies ändern, werden die zugehörigen Abhängigkeiten benachrichtigt. Aktualisierungsvorgang

Warum Vue asynchrones Rendering verwendet

Wenn die asynchrone Aktualisierung nicht verwendet wird, wird die Schaltfläche für die aktuelle Miete bei jeder Aktualisierung der Daten erneut gerendert. Aus Leistungsgründen aktualisiert Vue die Daten nach der aktuellen Runde der Datenaktualisierung asynchron

Vorteile von Vue

• Das kompakte Framework konzentriert sich nur auf die Ansichtsebene. Es handelt sich um eine Sammlung von Ansichten zum Erstellen von Daten mit einer Größe von nur einigen zehn KB. Vue.js bietet eine effiziente Datenbindung und ein flexibles Komponentensystem über eine übersichtliche API.
• Einfache und leicht zu erlernende chinesische Entwicklung, chinesische Dokumente, keine Sprachbarrieren, leicht zu verstehen und zu lernen
• Durch die bidirektionale Datenbindung wird die bidirektionale Datenbindung durch die Idee von MVVM realisiert, sodass Entwickler keine Dom-Objekte mehr bearbeiten müssen und mehr Zeit zum Nachdenken über die Geschäftslogik haben
• Componentized
  Vue.js verwendet Komponenten, um verschiedene Module in einer einseitigen Anwendung in eine einzelne Komponente (Komponente) aufzuteilen. Wir müssen zuerst nur verschiedene Komponenten-Tags (Belegungslöcher) in die übergeordnete Anwendung schreiben und die Parameter schreiben, an die übergeben werden soll Die Komponente in der Komponentenbezeichnung (genau wie das Übergeben eines Parameters an eine Funktion wird dieser Parameter als Attribut der Komponente bezeichnet). Schreiben Sie dann die Implementierung der verschiedenen Komponenten (füllen Sie die Lücke aus), und beenden Sie die gesamte Anwendung
• Das virtuelle DOM
  berechnet und optimiert die endgültige DOM-Operation. Da diese DOM-Operation eine Vorverarbeitungsoperation ist und das DOM nicht tatsächlich betreibt, wird sie als virtuelles DOM bezeichnet. Schließlich wird die DOM-Operation nach Abschluss der Berechnung gesendet, und die Änderung der DOM-Operation wird im DOM-Baum wiedergegeben
• Die Trennung von Ansicht, Daten und Struktur erleichtert Datenänderungen, es ist keine Änderung des Logikcodes erforderlich, und zugehörige Vorgänge können nur durch Betriebsdaten ausgeführt werden
• Es läuft schneller, wie Vergleichen und Reagieren, und betreibt auch virtuelle Domänen. In Bezug auf die Leistung hat vue große Vorteile

Vergleich von Proxy und Object.defineProperty ()

Vorteile von Proxy:

• Sie können das Objekt anstelle des Attributs direkt überwachen und ein neues Objekt zurückgeben
• Sie können Wertänderungen direkt überwachen
• Kann das gesamte Objekt entführen und ein neues Objekt zurückgeben

Nachteile von Proxy:

• Proxy ist eine neue Funktion von es6, und die Kompatibilität ist nicht gut. Daher ist Vue3 nicht offiziell für Entwickler freigegeben

Vorteile von Object.defineProperty:

• Gute Kompatibilität, Unterstützung IE9
• Versionen unter IE9 sind nicht kompatibel

Nachteile von Object.defineProperty:

• Die Änderung des Array-Index kann nicht überwacht werden. Dies führt zu einer direkten Antwort auf den Array-Einstellungswert über den Array-Index.
• Wir können nur die Attribute des Objekts entführen, wir müssen jedes Attribut jedes Objekts durchlaufen

Wie man React und Vue vergleicht

Unterschiedliche Implementierungsprinzipien zur Überwachung von Datenänderungen

• Vue kann Datenänderungen durch Getter / Setter und einige Funktionen genau kennen
• Standardmäßig erfolgt React durch Vergleichen von Referenzen (diff). React überwacht Datenänderungen nicht genau.

Der Datenfluss ist unterschiedlich:

• Vue2.0 kann eine bidirektionale Bindung über Requisiten realisieren und das Statusverwaltungsframework des vuex-einseitigen Datenflusses verwenden
• React unterstützt keine bidirektionale Bindung und befürwortet den Single Data Flow, das Redux One-Way Data Framework State Management Framework

Der Unterschied zwischen Komponentenkommunikation:

• Vue verfügt über drei Kommunikationsmethoden für Komponenten: Die übergeordnete Komponente übergibt Daten über Requisiten oder Rückrufe an die untergeordnete Komponente. Die untergeordnete Komponente sendet Daten oder Rückrufe über das Ereignisereignis an die übergeordnete Komponente. Die übergeordnete Komponente
  kann Daten über die Bereitstellung an die untergeordnete Komponente übergeben / injizieren, die ebenenübergreifend sein kann
• React verfügt über drei Kommunikationsmethoden für Komponenten: Die übergeordnete Komponente übergibt Daten über Requisiten an die untergeordnete Komponente. React unterstützt die untergeordnete Komponente nicht zum Senden von Daten wie die übergeordnete Komponente. Stattdessen verwendet sie die Rückruffunktion,
  um die übergeordnete Komponente zu implementieren, an die Daten übergeben werden die untergeordnete Komponente durch den Kontext, der ebenenübergreifend sein kann

Die Methode zum Rendern von Vorlagen ist unterschiedlich:

• Oberflächlich betrachtet: React rendert Vorlagen über JSX, Vue rendert über HTML
• Aus einer tieferen Perspektive: React implementiert die gängige Syntax in Vorlagen über natives JS wie Plug-Ins, Bedingungen und Schleifen.
  Vue ist eine separate Vorlage, die von der Komponente JS getrennt ist und durch Anweisungen wie v-if implementiert wird

In der Vorlage verwendete Daten:

• Die in der Vorlage in React verwendeten Daten können direkt importiert und beim Rendern aufgerufen werden
• Die in der Vorlage in Vue verwendeten Daten müssen darauf übertragen werden, und eine Komponente muss importiert und in Komponenten deklariert werden

Der Renderprozess ist anders:

• Vue muss nicht den gesamten Komponentenbaum rendern
• Wenn sich der Reaktionsstatus ändert, werden alle untergeordneten Komponenten neu gerendert

Der Rahmen ist wesentlich anders:

• Vue ist im Wesentlichen das von MVC entwickelte MVVM-Framework
• React ist ein Front-End-Framework, das aus der Back-End-Komponentisierung entwickelt wurde

Der Unterschied zwischen Vuex und Redux:

• Vuex kann Dispatch und Commit verwenden, um Updates einzureichen
• Redux kann den Versand nur zum Senden von Updates verwenden

Verschiedene Möglichkeiten, verschiedene Funktionen zu kombinieren:

• Die Art und Weise, wie Vue verschiedene Funktionen kombiniert, erfolgt durch Mixin. Dies kann mir helfen, die definierte Vorlage und die deklarierten Requisiten zum Empfangen von Daten zu kompilieren.
• React kombiniert verschiedene Funktionen durch HoC (Komponenten höherer Ordnung), was im Wesentlichen eine Funktion höherer Ordnung ist

So extrahieren Sie dieselbe Logik in Vue

Die Verwendung von Vue.mixin mischt eine gemeinsame Logik in jeden Lebenszyklus, jede Funktion usw. der Komponente

NextTick-Implementierungsprinzip

Die nextTick-Methode verwendet hauptsächlich Makro- und Mikroaufgaben, um eine asynchrone Methode zu definieren. Bei mehreren Aufrufen von nextTick wird die Methode in der Warteschlange gespeichert, und die aktuelle Warteschlange wird über diese asynchrone Methode gelöscht. Diese nextTick-Methode ist also eine asynchrone Methode

Die zeitliche Komplexität des Diff-Algorithmus

Der vollständige Diff-Algorithmus aus zwei Zahlen ist eine Zeitkomplexität von o (n3). Vue optimiert das Problem der O (n3) -Komplexität und wandelt es in ein Problem der O (n) -Komplexität um (vergleichen Sie nur dieselbe Ebene, ohne die Ebene zu berücksichtigen) Problem) Im Frontend verschieben Sie Dom-Elemente selten über Ebenen hinweg, sodass Virtual Dom nur Elemente auf derselben Ebene vergleicht

Beschreiben Sie kurz das Prinzip des Diff-Algorithmus in Vue

• Vergleichen Sie zuerst auf derselben Ebene und vergleichen Sie untergeordnete Knoten
• Beurteilen Sie zunächst, ob eine Partei einen Sohn und die andere keinen Sohn hat
• Ich habe einen Sohn
• Vergleichen Sie untergeordnete Knoten rekursiv

Der Unterschied zwischen v-if und v-show in Vue

• v-show ist CSS-Schalter, v-if ist vollständige Zerstörung und Neuerstellung
• Verwenden Sie v-show für häufiges Umschalten und v-if für weniger Änderungen zur Laufzeit
• v-if = 'false' v-if ist ein bedingtes Rendern. Es wird nicht gerendert, wenn es falsch ist

Wann wird Vue in jedem Lebenszyklus aufgerufen?

• beforeCreate wird aufgerufen, nachdem die Instanz initialisiert wurde und bevor der Datenbeobachter
• Die erstellte Instanz wird aufgerufen, nachdem sie erstellt wurde. In diesem Schritt wurde die folgende Konfiguration abgeschlossen:
  Datenbeobachter, Berechnung von Attributen und Methoden, Rückruf von Überwachungs- / Ereignisereignissen, es gibt kein $ el
• beforeMount wird vor dem Start des Mount aufgerufen: Die zugehörige Renderfunktion wird zum ersten Mal aufgerufen
• gemountetes el wird durch das erstellte vm. $ el ersetzt, und der Hook wird aufgerufen, nachdem er auf der Instanz gemountet wurde
• beforeUpdate wird aufgerufen, wenn die Daten aktualisiert werden, bevor das virtuelle DOM erneut gerendert und gepatcht wird
• Das erneute Rendern und Patchen des virtuellen DOM wurde aufgrund von Datenänderungen aktualisiert. Danach wird der Hook aufgerufen
• beforeDestory wird aufgerufen, bevor die Instanz zerstört wird. In diesem Schritt ist die Instanz noch vollständig verwendbar
• Wird aufgerufen, nachdem die destroyVue-Instanz zerstört wurde. Nach dem Aufruf wird alles, was von der Vu-Instanz angezeigt wird, ungebunden, alle Ereignis-Listener werden entfernt und alle Unterinstanzen werden ebenfalls zerstört. Dieser Hook wird beim serverseitigen Rendern nicht aufgerufen

Scannen Sie aufgrund des begrenzten Platzes des Artikels den folgenden QR-Code nach weiteren Inhalten, folgen Sie dem offiziellen WeChat-Konto und aktualisieren Sie ihn so schnell wie möglich!