2023 Front-End-Interviewfragen (klassische Interviewfragen)

Was ist der Unterschied zwischen Vue2.0 und Vue3.0?

Zwei-Wege-Bindungsaktualisierung

Die bidirektionale Datenbindung von vue2 wird durch die Verwendung einer API von ES5, Object.defineProperty(), zur Datenentführung in Kombination mit dem Publish-Subscribe-Modus realisiert.
Vue3 verwendet die ProxyAPI von ES6, um Daten als Proxy zu verwenden. Jedes Objekt wird über die Funktion reactive () mit einer Proxy-Schicht umwickelt, und die Änderung von Eigenschaften wird über Proxy überwacht, um die Überwachung von Daten zu realisieren.
Im Vergleich zur vue2-Version bietet die Verwendung von Proxy folgende Vorteile:
1. defineProperty kann nur eine bestimmte Eigenschaft und nicht alle Objekte überwachen. Sie können für In, Schließungen usw. speichern, um die Effizienz zu verbessern (das gesamte Objekt direkt binden). Das heißt: Ja)
2. Sie können das Array überwachen. Anstatt bestimmte Vorgänge für das Array separat auszuführen, können Sie die Vorgänge aller Objekttypdaten direkt über den Proxy abfangen, was die Überwachung des Arrays perfekt unterstützt.

Requisiten abrufen
Vue2 kann Requisiten direkt im Skriptcodeblock abrufen. Vue3 übergibt die API über den Setup-Befehl.
Im Gegensatz zu
Vue2 verwendet es die Optionstyp-API (Options API) und Vue3 verwendet die Kompositions-API (Composition API),
um Daten zu erstellen
. Wenn die Daten in Daten eingegeben werden, muss vue3 eine neue setup()-Methode verwenden, die ausgelöst wird, wenn die Komponente initialisiert und erstellt wird.

unterschiedlicher Lebenszyklus

vue2     -------- vue3
beforeCreate   -> setup()	开始创建组件之前，创建的是data和method
created        -> setup()
beforeMount    -> onBeforeMount	组件挂载到节点上之前执行的函数。
mounted       -> onMounted	组件挂载完成后执行的函数
beforeUpdate   -> onBeforeUpdate	组件更新之前执行的函数。
updated        -> onUpdated	组件更新完成之后执行的函数。
beforeDestroy   -> onBeforeUnmount	组件挂载到节点上之前执行的函数。
destroyed      -> onUnmounted	组件卸载之前执行的函数。dszhuoyi
activated       -> onActivated	组件卸载完成后执行的函数
deactivated     -> onDeactivated

Bezüglich der Priorität von v-if und v-for:

vue2 verwendet sowohl v-if als auch v-for. v-for für ein Element gibt
vue3 Priorität. v-if hat immer Vorrang vor v-for

Der Diff-Algorithmus von vue2 und vue3
vue2

• Der vue2-Diff-Algorithmus besteht darin, virtuelle Knoten zu vergleichen und ein Patch-Objekt zurückzugeben, um den Unterschied zwischen den beiden Knoten zu speichern, und schließlich die vom Patch aufgezeichnete Nachricht zu verwenden, um den Dom lokal zu aktualisieren.
• Der vue2-Diff-Algorithmus vergleicht jeden Vnode, und für einige Elemente, die nicht an der Aktualisierung teilnehmen, ist der Vergleich etwas leistungsintensiv.

Ansicht 3

• Der vue3-Diff-Algorithmus fügt während der Initialisierung jedem virtuellen Knoten ein PatchFlags hinzu, und PatchFlags ist eine optimierte Kennung.
• Es werden nur vNodes verglichen, deren patchFlags sich geändert haben, die Ansicht wird aktualisiert und Elemente, die sich nicht geändert haben, werden statisch markiert und direkt beim Rendern wiederverwendet.

Was ist der Unterschied zwischen berechneten Eigenschaften und Überwachungs- und Methoden in Vue?

Für Computed : Es unterstützt Caching und führt nur dann eine Neuberechnung durch, wenn sich die abhängigen Daten ändern. Es
unterstützt keine Asynchronität. Wenn Computed über asynchrone Vorgänge verfügt, können Datenänderungen nicht überwacht werden.
Berechnete Werte werden standardmäßig in den Cache verschoben , und Berechnungsattribute basieren auf ihnen. Reaktionsabhängige Abhängigkeiten werden zwischengespeichert, das heißt, sie werden auf der Grundlage der in den Daten deklarierten Daten oder der Daten in den von der übergeordneten Komponente übergebenen Requisiten berechnet.
Wenn ein Attribut aus anderen Attributen berechnet wird und dieses Attribut von anderen Attributen abhängt, wird im Allgemeinen berechnet.
Wenn der Attributwert des berechneten Attributs eine Funktion ist, wird standardmäßig die Get-Methode und der Rückgabewert der Funktion verwendet ist der Attributwert des Attributs. In der Berechnung verfügt das Attribut über eine Get-Methode und eine Set-Methode. Wenn sich die Daten ändern, wird die Set-Methode aufgerufen.

Für Watch : Unterstützt kein Caching. Wenn sich die Daten ändern, wird der entsprechende Vorgang ausgelöst. Unterstützt
asynchrone Überwachung
. Die Überwachungsfunktion empfängt zwei Parameter. Der erste Parameter ist der letzte Wert und der zweite der Wert vor der Änderung
als Attribut Wenn eine Änderung vorliegt, müssen Sie die entsprechende Operation ausführen. Die Überwachungsdaten müssen die in den Daten deklarierten Daten oder die Daten in den von der übergeordneten Komponente übergebenen Requisiten sein. Bei einer Änderung werden andere Vorgänge ausgeführt ausgelöst. Die Funktion verfügt über zwei Parameter: „immediate“:
Laden der Komponente. Löst sofort die Rückruffunktion „deep“ aus: „Tief überwachen“, um interne Änderungen in den Daten zu erkennen, die in komplexen Datentypen verwendet werden, z. B. Änderungen an Objekten im Array. Es ist zu beachten, dass Deep keine Änderungen innerhalb von Arrays und Objekten überwachen kann.
Uhren werden benötigt, wenn Sie als Reaktion auf ständige Änderungen asynchrone oder teure Vorgänge ausführen möchten.

Was sind die Vor- und Nachteile von Single-Page-Apps und Multi-Page-Apps?

Einzelne Seite (Sing Page Application – SPA): Wie der Name schon sagt, gibt es nur eine Seite. Im Allgemeinen besteht es aus einer Homepage und mehreren Routing-Seiten.

• Vorteile:
  kein Nachladen öffentlicher Ressourcen, Teillast, geringere Belastung des Servers,
  schnelle Umschaltgeschwindigkeit, gute Benutzererfahrung,
  Trennung von Front- und Back-End
• Nachteile:
  Nicht förderlich für SEO (kann optimiert werden: z. B. verzögertes Laden von Routen usw.) Das
  erstmalige Laden nimmt viel Zeit in Anspruch
  und ist schwierig zu entwickeln (relativ mehrseitig).

Multi Page Application (MPA): Es gibt mehrere HTML-Seiten und beim Springen wird von einer HTML-Seite zur anderen gesprungen.

• Vorteile:
  Gut für SEO.
  Einfacher zu skalieren.
  Einfachere Datenanalyse.
• Nachteile:
  Hohe Entwicklungskosten.
  Der Server ist überlastet.
  Die Benutzererfahrung ist relativ schlecht.

Erzählen Sie mir etwas über das Prinzip des CSS-Bereichs in Vue?

Das Bereichsattribut ist ein spezielles Attribut (boolescher Wert) im Style-Tag. Zeigt an, dass die Stile im aktuellen Stil nur zum aktuellen Modul gehören. (Umfang, Privatisierungsideen) Stellen Sie sicher, dass der Umfang von CSS nicht global wird und durch CSS anderer Module verunreinigt wird.

Das Konzept von Scoped wird in Vue eingeführt. Die Designidee von Scoped besteht darin, zu verhindern, dass der Stil der aktuellen Komponente an den Stil anderer Orte geändert wird. Die Methode von data-v-hash wird verwendet, um CSS über das zu verfügen Identifizierung des entsprechenden Moduls. Schreiben Sie so: Bei der Verwendung von CSS müssen nicht zu viele zusätzliche Selektoren hinzugefügt werden, was viel praktischer ist.

Sprechen Sie über das Verständnis der bidirektionalen Bindung in Vue?

Vue.js nutzt 数据劫持结合发布者-订阅者模式Object.defineProperty(), um den Setter und Getter jeder Eigenschaft zu kapern, veröffentlicht eine Nachricht an den Abonnenten, wenn sich die Daten ändern, und löst den entsprechenden Überwachungsrückruf aus. Es ist hauptsächlich in die folgenden Schritte unterteilt:

• Die zu beobachtenden Datenobjekte werden rekursiv durchlaufen, einschließlich der Attribute der Unterattributobjekte, und Setter und Getter werden hinzugefügt. Durch Zuweisen eines Werts zu diesem Objekt wird der Setter ausgelöst, und dann können die Datenänderungen überwacht werden.

• Die Kompilierung analysiert die Vorlagenanweisungen, ersetzt die Variablen in der Vorlage durch Daten, initialisiert dann die gerenderte Seitenansicht, bindet den Knoten, der jeder Anweisung entspricht, mit einer Aktualisierungsfunktion, fügt Abonnenten hinzu, die die Daten abhören, und empfängt, sobald sich die Daten ändern, eine Benachrichtigungs- und Aktualisierungsansicht

• Watcher-Abonnenten stellen die Kommunikationsbrücke zwischen Observer und Compile dar. Die wichtigsten Dinge, die Sie tun müssen, sind: ① Fügen Sie sich selbst zum Eigenschaftsabonnenten (dep) hinzu, wenn Sie sich selbst instanziieren. ② Es muss über eine update()-Methode verfügen. ③ Warten Sie, bis sich die Eigenschaft ändert, dep. Wann Nachdem er durch Notice () benachrichtigt wurde, kann er seine eigene update ()-Methode aufrufen und den beim Kompilieren gebundenen Rückruf auslösen. Anschließend ist er erfolgreich.

• Als Datenbindungseintrag integriert MVVM Observer, Compile und Watcher, überwacht seine eigenen Modelldatenänderungen über Observer, analysiert und kompiliert Vorlagenanweisungen über Compile und verwendet schließlich Watcher, um eine Kommunikationsbrücke zwischen Observer und Compile zu bauen, um Datenänderungen zu erreichen - > Aktualisierung anzeigen; Interaktionsänderung anzeigen (Eingabe) -> bidirektionale Bindungswirkung der Datenmodelländerung.

Warum kann die Syntax von vue2 und vue3 nicht gemischt werden?

Die Syntax von Vue2 und Vue3 kann nicht gemischt werden, da das Design von Vue3 erheblich verbessert wurde, einschließlich Änderungen in der zugrunde liegenden Architektur und grammatikalischen Aktualisierungen, sodass die Syntax von Vue3 nicht vollständig mit Vue2 kompatibel ist.

Beispielsweise handelt es sich bei der in Vue3 verwendeten Composition API um einen neuen API-Stil, der sich stark von der Options-API in Vue2 unterscheidet, was zu Fehlern bei der Verwendung der Composition API in Vue2 führt. Ebenso unterscheiden sich die Vorlagenanweisungen und Komponentenregistrierungsmethoden in Vue3 von denen in Vue2, was es auch unmöglich macht, die beiden Versionen direkt zu mischen.

Die Hauptunterschiede sind wie folgt:

• 1. Methode zur Vorlagenkompilierung: Vue 2 verwendet eine stringbasierte Vorlagenkompilierung, während Vue 3 eine funktionsbasierte Vorlagenkompilierung verwendet.

• 2. Reaktionssystem: Vue 3 implementiert ein effizienteres Reaktionssystem über Proxy, das sich stark von Object.defineProperty in Vue 2 unterscheidet.

• 3. Komponentenregistrierungsmethode: Vue 3 verwendet neue APIs zum Registrieren von Komponenten, z. B. createAppund defineComponent, während Vue 2 Vue.componentglobale APIs zum Registrieren von Komponenten verwendet.

Wie kommuniziert die Setup-Funktion in vue3 mit Komponenten?

• PropsDie Methode ist die gebräuchlichste Art der Eltern-Kind-Übertragung in Vue. Wir definieren Daten und Datenoperationen in der übergeordneten Komponente. Die untergeordnete Komponente rendert nur eine Liste. Einfach rendern

• emitDie Methode ist auch die häufigste Komponentenkommunikationsmethode in Vue. Diese Methode wird für die Übergabe von der untergeordneten an die übergeordnete Komponente verwendet. Nach dem Klicken auf die Schaltfläche [Hinzufügen] in der untergeordneten Komponente wird ein benutzerdefiniertes Ereignis ausgegeben und der hinzugefügte Wert als Parameter übergeben . In der übergeordneten Komponente müssen Sie nur die benutzerdefinierten Ereignisse der untergeordneten Komponente abhören und dann den entsprechenden Additionsvorgang ausführen

• provide和injectEs handelt sich um ein in Vue bereitgestelltes API-Paar, das die Übertragung von Daten von übergeordneten Komponenten zu untergeordneten Komponenten realisieren kann. Unabhängig von der Tiefe der Hierarchie kann dies über dieses API-Paar realisiert werden.

• Vuex und Piniasind Zustandsverwaltungstools in Vue 3. Mit diesen beiden Tools kann problemlos eine Komponentenkommunikation erreicht werden.

• RefsManchmal möchten wir auf die Eigenschaften oder Methoden der durch Refs gebundenen Komponenten zugreifen, wir verwenden die Eigenschaften oder Methoden der durch Refs gebundenen Komponenten, wir verwenden die Eigenschaften oder Methoden der durch Refs gebundenen Komponenten, wir verwenden Refs. Aber Vue3 unterscheidet sich von Vue2. Wir können im Setup von Vue3 nicht darauf zugreifen, daher müssen wir eine Methode verwenden, nämlich getCurrentInstance, die das aktuelle Instanzobjekt zurückgibt.

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

Sowohl v-if als auch v-show in Vue.js sind Anweisungen zur Steuerung der Anzeige und Ausblendung von Elementen, weisen jedoch die folgenden Unterschiede auf:

Die Kompilierungsmethoden sind unterschiedlich : v-if ist „bedingtes Rendern“, es wird das Element und seine Unterkomponenten entsprechend dem wahren und falschen Wert des Ausdrucks zerstören oder neu erstellen; und v-show ist „bedingte Anzeige“, das wird es Ändern Sie das CSS der Elementstile, um zu steuern, ob ein Element angezeigt oder ausgeblendet wird.

Der anfängliche Rendering-Aufwand ist unterschiedlich : Wenn v-if zum ersten Mal gerendert wird und der Ausdruck falsch ist, werden das entsprechende Element und seine Unterkomponenten nicht gerendert, wodurch die anfängliche Ladezeit der Seite verkürzt wird; während v-show zum ersten Mal gerendert wird, Es rendert das Element immer und steuert, ob es über CSS-Stile angezeigt wird.

Beim häufigen Umschalten ist der Overhead anders : Da v-if Elemente zerstört und neu erstellt, kann es beim häufigen Umschalten zu einem großen Leistungsoverhead kommen, während v-show nur das Anzeigen und Ausblenden von Elementen durch Ändern des CSS-Stils steuert, sodass der Leistungsoverhead gering ist beim Umschalten.

Kurz gesagt, wenn der Anzeigestatus des Elements häufig geändert werden muss, wird die Verwendung von v-show empfohlen. Wenn sich der Anzeigestatus des Elements nach der Initialisierung selten ändert, wird die Verwendung von v-if empfohlen

Was ist Vuex in Vue.js?

Vuex ist eine offiziell von Vue.js bereitgestellte Statusverwaltungsbibliothek, die hauptsächlich zur Lösung der Probleme verwendet wird, die bei der Verwaltung des gemeinsamen Status (z. B. Benutzeranmeldestatus, Warenkorbinhalt usw.) in großen Einzelseitenanwendungen auftreten. Vuex folgt den Designideen von Flux und Redux, speichert den gemeinsamen Status der Anwendung in einem globalen Speicher und modifiziert ihn und greift auf vorhersehbare Weise darauf zu.

• Vuex enthält die folgenden Kernkonzepte:

• Status: Speichert den freigegebenen Status der Anwendung.

• Mutationen: werden zum Ändern der Daten im Status verwendet.

• Aktionen: Wird zur Verarbeitung asynchroner Vorgänge oder Batch-Mutationen verwendet.

• Getter: Wird verwendet, um abgeleitete Zustandswerte basierend auf dem Zustand zu berechnen.

Darüber hinaus bietet Vuex auch einige Hilfsfunktionen wie MapState, MapMutations, MapActions und MapGetters usw., wodurch die Verwendung von Vuex in Komponenten einfacher und bequemer wird.

Kurz gesagt, Vuex bietet eine Idee und einen Mechanismus zur Datenflussverwaltung, die uns dabei helfen können, den gemeinsamen Status der Anwendung besser zu organisieren und zu verwalten und so die Anwendung einfacher zu warten und zu erweitern.

Sprechen Sie über das Prinzip des Proxy-Proxys

Proxy ist eine erweiterte Funktion in JavaScript, die als Proxy für den Zugriff auf Objekte oder Funktionen verwendet werden kann, sodass beim Zugriff auf ein Objekt oder eine Funktion zusätzliches Verhalten oder zusätzliche Logik eingefügt werden kann. Das Prinzip ist wie folgt:

Wenn wir ein Proxy-Objekt als Proxy für ein anderes Objekt (Zielobjekt genannt) verwenden, werden alle Vorgänge am Zielobjekt zur Verarbeitung an das Proxy-Objekt weitergeleitet. Auf dem Proxy-Objekt können wir diese Vorgänge abfangen und verarbeiten, indem wir einige zusätzliche Methoden (sogenannte „Captors“) definieren. Beispielsweise können wir einen Get-Catcher definieren, der einen Standardwert zurückgibt, anstatt eine Ausnahme auszulösen, wenn das Proxy-Objekt eine Eigenschaft liest, die im Zielobjekt nicht vorhanden ist; wir können auch einen Set-Catcher definieren, um die Eigenschaft des Zielobjekts zu ändern Führen Sie im Proxy-Objekt eine zusätzliche Logik aus.

Mit Proxy können Sie den Zugriff und das Verhalten von Objekten flexibel steuern und beeinflussen. Im Vergleich zu Object.defineProperty ist Proxy leistungsfähiger, flexibler und einfacher zu erweitern. Es ist jedoch zu beachten, dass Proxy eine relativ neue Funktion ist und daher von Browsern niedrigerer Versionen möglicherweise nicht unterstützt wird. Daher ist bei der Verwendung von Proxy eine Kompatibilitätsprüfung erforderlich.

Sprechen Sie über das Verständnis von Speicherlecks? In welchen Situationen kann es zu Speicherlecks kommen?

Sprechen Sie über das Verständnis von Speicherlecks? In welchen Situationen kann es zu Speicherlecks kommen?

Ein Speicherverlust bedeutet, dass der im Programm nicht mehr benötigte Speicher nicht rechtzeitig freigegeben wird, was dazu führt, dass immer weniger Speicher im System verfügbar ist, was schließlich dazu führen kann, dass das System abstürzt oder sehr langsam wird.

Häufige Speicherverlustsituationen sind wie folgt :

• Die Objektreferenzzählung ist falsch: In einigen Programmiersprachen wird Speicherplatz für Objekte zugewiesen und freigegeben. Wenn die Referenzzählung jedoch nicht korrekt gezählt wird, ist es nicht möglich, den von Objekten belegten Speicher freizugeben, der nicht mehr benötigt wird.

• Zirkelverweis: Wenn zwei oder mehr Objekte aufeinander verweisen und diese Objekte an keiner anderen Stelle referenziert werden, wird ein Zirkelverweis zwischen ihnen gebildet, was dazu führt, dass der Speicher dieser Objekte nicht zurückgefordert wird.

• Zeitgeber und Ereignis-Listener werden nicht rechtzeitig bereinigt: Wenn Zeitgeber oder Ereignis-Listener nicht rechtzeitig bereinigt werden, bleibt der von ihnen belegte Speicher immer vorhanden, was zu Speicherverlusten führt.

• Zwischenspeichern einer großen Datenmenge: Wenn eine große Datenmenge in der Anwendung zwischengespeichert wird und die Daten nicht rechtzeitig gelöscht werden, wenn sie nicht mehr benötigt werden, führt dies zu einem Speicherverlust.

• Browser-Tabs öffnen: Wenn Sie bei der Verwendung eines Browsers eine große Anzahl von Tabs öffnen und diese nicht schließen, belegt der Browser immer mehr Speicher und das System wird schließlich sehr langsam.

Angesichts der oben genannten Situation können wir die folgenden Maßnahmen ergreifen, um Speicherlecks zu vermeiden:

• Nicht mehr benötigten Speicherplatz explizit freigeben;

• Vermeiden Sie Zirkelbezüge;

• Bereinigen Sie Timer und Ereignis-Listener rechtzeitig.

• Vermeiden Sie das Zwischenspeichern großer Datenmengen;

• Schließen Sie unnötige Browser-Registerkarten usw. umgehend.

Sprechen Sie über den Unterschied zwischen HTTP und HTTPS. Was ist das Verschlüsselungsprinzip von HTTPS?

Sowohl HTTP (Hypertext Transfer Protocol) als auch HTTPS (Hypertext Transfer Protocol Secure) sind Protokolle zur Datenübertragung zwischen Clients und Servern und spiegeln sich hauptsächlich 区别in den folgenden Aspekten wider:

• Sicherheit: HTTP überträgt Daten im Klartext, die von böswilligen Benutzern leicht abgefangen, manipuliert oder gestohlen werden können, während HTTPS Daten über das SSL/TLS-Verschlüsselungsprotokoll verschlüsselt, um die Sicherheit der Datenübertragung zu gewährleisten.

• Portnummer: HTTP verwendet standardmäßig Port 80 und HTTPS verwendet standardmäßig Port 443.

• Zertifikatauthentifizierung: Der HTTPS-Server muss über ein digitales Zertifikat verfügen, das von einer Drittorganisation authentifiziert wird, um die Identität der kommunizierenden Parteien und die Integrität der Daten sicherzustellen.

Das Verschlüsselungsprinzip von HTTPS basiert auf dem SSL/TLS-Protokoll und der allgemeine Prozess ist wie folgt:

• Der Client sendet eine Verbindungsanfrage an den Server und stellt eine Liste der von ihm unterstützten Verschlüsselungsalgorithmen bereit. Der Server wählt einen Verschlüsselungsalgorithmus und sendet ihn als Antwort an den Client zurück.

• Die beiden Parteien verhandeln über die Generierung einer Zufallszahl als geheimen Schlüssel für die verschlüsselte Kommunikation.

• Verwenden Sie den von beiden Parteien ausgehandelten Verschlüsselungsalgorithmus und geheimen Schlüssel, um die Daten zu verschlüsseln und zu entschlüsseln.

• Während des Handshake-Prozesses sendet der Server sein eigenes digitales Zertifikat an den Client, und der Client überprüft das digitale Zertifikat des Servers mithilfe des im Browser gespeicherten öffentlichen Schlüssels der Zertifizierungsstelle, um die Identität des Servers und die Gültigkeit des Zertifikats sicherzustellen.

• Der Client verwendet den öffentlichen Schlüssel des Servers zum Verschlüsseln und sendet den verschlüsselten Schlüssel an den Server, wodurch die Authentifizierung und Datenverschlüsselung beider Kommunikationsparteien realisiert wird.

Kurz gesagt: HTTPS verschlüsselt und authentifiziert Daten mithilfe des SSL/TLS-Protokolls, um die Sicherheit und Integrität der Datenübertragung zu gewährleisten, und ist zu einem wichtigen Mittel zum Schutz der Privatsphäre und Sicherheit der Benutzer im modernen Internet geworden.

Sprechen Sie über Ihr Verständnis des Browser-Caching-Mechanismus

Der Unterschied zwischen Pre-Cache und ausgehandeltem Cache

andere Interviewfragen

Zusammenfassung der Interviewfragen 3

Interview Daquan

Zusammenfassung der Interviewschwierigkeiten

Zusammenfassung der Interviewfragen 4