Zusammenfassung der neuesten hochfrequenten Front-End-Interviewfragen im Jahr 2023 (mit Antworten)

mvvm-Szenario: In Szenarien mit vielen Datenoperationen und einer großen Anzahl von DOM-Elementen ist es bequemer, die offene Methode von mvvm zu übernehmen, sodass Entwickler mehr Erfahrung in Datenänderungen investieren und umständliche DOM-Elemente freigeben können

MVVM-Modell,
M-Daten sind die aus dem Hintergrund gewonnenen Produktdaten
V-Ansicht ist eine geschriebene Seite, jedes Div, jede Eingabe ist eine Ansicht
VM-Ansichtsmodell,
Wenn sich die Daten ändern, wird die Anzeige der Ansicht über das Ansichtsmodell geändert, und die Änderung der Ansicht wirkt sich auch auf die Änderung der Daten über das Ansichtsmodell aus
Kern: Der Kern der bidirektionalen Datenbindung von VUE ist die Methode Object.defineProperty().

2. Was sind die Lebenszyklen von Vue?

beforeCreate (vor der Erstellung), erstellt (nach der Erstellung), beforeMount (vor dem Laden), gemountet (nach dem Laden), beforeUpdate (vor dem Update), aktualisiert (nach dem Update), beforeDestroy (vor der Zerstörung), zerstört (nach der Zerstörung)

mount Der reale Dom-Mount wird abgeschlossen, aktualisiert und automatisch aktualisiert, solange die Daten geändert werden. Trigger destroy, um den globalen Timer und benutzerdefinierte Ereignisse zu zerstören

Wenn Keep-Alive verwendet wird, gibt es zwei weitere: aktiviert und deaktiviert. Wenn die Komponente zum ersten Mal geladen wird, werden jeweils die ersten 4 Lebenszyklen ausgeführt: beforeCreate, erstellt, beforeMount, gemountet

3. Was ist der Unterschied zwischen v-if und v-show?

Derselbe Punkt: Kann das Anzeigen und Ausblenden von Dom-Elementen steuern
Der Unterschied: v-show ändert nur das Anzeigeattribut, das Dom-Element verschwindet nicht und es ist nicht erforderlich, die Seite beim Umschalten erneut zu rendern
v-if löscht das dom-Element direkt von der Seite und ein erneuter Wechsel erfordert ein erneutes Rendern der Seite

4. Was ist asynchrones Warten? Was tut es?

Async Wait ist eine neue Ergänzung zu ES7. Mit Async wird eine Funktion deklariert und mit Wait auf den Abschluss einer asynchronen Methode gewartet. Die asynchrone Funktion gibt ein Versprechensobjekt zurück. Sie können die .then-Methode verwenden, um eine Rückruffunktion hinzuzufügen. Während der Ausführung der Funktion kehrt sie zuerst zurück, sobald sie auf „await“ stößt. Nach Abschluss der asynchronen Operation wird die Anweisung ausgeführt hinter dem Funktionskörper

5. Was sind die am häufigsten verwendeten Array-Methoden? Welche Methoden verändern das ursprüngliche Array und welche nicht

Ändert das ursprüngliche Array:
- pop (das letzte Element des Arrays entfernen und das entfernte Element zurückgeben)
- push (ein oder mehrere Elemente am Ende des Arrays hinzufügen und die neue Länge zurückgeben)
- Shift (das erste Element des Arrays löschen und zurückgeben)
- unshift (ein oder mehrere Elemente am Anfang des Arrays hinzufügen und die neue Länge zurückgeben)
- reverse (die Reihenfolge der Elemente des Arrays umkehren)
- sort (sortiert die Elemente eines Arrays)
- splice (zum Einfügen, Löschen oder Ersetzen von Elementen eines Arrays)
Ändert das ursprüngliche Array nicht:
- concat --- zwei oder mehr Arrays verbinden und das Ergebnis zurückgeben.
- every --- prüft, ob jedes Element des Array-Elements die Bedingung erfüllt.
- Einige --- Überprüfen Sie, ob im Array-Element ein Element vorhanden ist, das die angegebene Bedingung erfüllt.
- Filter: Erkennt Array-Elemente und gibt ein Array aller Elemente zurück, die die Kriterien erfüllen.
- indexOf---Suchen Sie nach einem Element im Array und geben Sie seine Position zurück.
- join --- fügt alle Elemente des Arrays in einen String ein.
- toString --- Konvertiert das Array in einen String und gibt das Ergebnis zurück.
- lastIndexOf---Gibt die letzte Vorkommensposition eines angegebenen Zeichenfolgenwerts zurück und sucht von hinten nach vorne an einer angegebenen Position in einer Zeichenfolge.
- Karte --- Verarbeiten Sie jedes Element des Arrays über die angegebene Funktion und geben Sie das verarbeitete Array zurück.
- Slice --- Wählen Sie einen Teil des Arrays aus und geben Sie ein neues Array zurück.
- valueOf---Gibt den ursprünglichen Wert des Array-Objekts zurück

6. Was ist die Prototypenkette?

Jedes Instanzobjekt verfügt über ein Proto-Attribut, das auf das Prototypobjekt des Konstruktors verweist. Das Prototypobjekt des Konstruktors ist ebenfalls ein Objekt und verfügt auch über ein Proto-Attribut. Auf diese Weise bildet der Prozess des schichtweisen Nachschlagens einen Prototyp Kette.

7. Was ist eine Schließung? Was sind die Vor- und Nachteile von Schließungen?

Konzept: Funktion verschachtelt, interne Variable kann auf externe Variable zugreifen, diese Variable wird als freie Variable bezeichnet
Problem gelöst: Variablen speichern
Das Problem: Es kommt zu Speicherverlusten
Verschlussanwendung: Anti-Shake-Drosselung

8. Was sind die neuen Funktionen von es6?

Vorlagenzeichenfolge hinzufügen
Pfeilfunktion
for-of (zum Durchlaufen von Daten – beispielsweise Werten in einem Array).
ES6 integriert Promise-Objekte in die Spezifikation und stellt native Promise-Objekte bereit.
Für die Deklaration von Variablen wurden die Befehle let und const hinzugefügt.
Es gibt auch das Konzept der Einführung des Modulmoduls

9. Warum muss die v-for-Schleife den Schlüssel binden?

Fügen Sie jedem DOM-Element einen Schlüssel als eindeutige Kennung hinzu, und der Diff-Algorithmus kann diesen Knoten korrekt identifizieren, wodurch das Rendern der Seite schneller wird!

10. Warum sollten die Daten in der Komponente als Funktion und nicht als Objekt definiert werden?

Jede Komponente ist eine Instanz von Vue. Komponenten teilen sich das Datenattribut. Wenn der Datenwert der Wert desselben Referenztyps ist, wirkt sich die Änderung einer davon auf die andere aus

11. Was sind die gängigen Methoden zur vertikalen Zentrierung von Kästchen? Bitte nennen Sie 3 Beispiele?

Verwirklichen Sie dies, indem Sie die Positionierungsmethode von Sohn und Vater anwenden

    <style>
        .container{
            width: 300px;
            height: 300px;
            position: relative;
        }
        .conter{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
        }
    </style>

Mithilfe der CSS3-Transformation können Sie die vertikale Zentrierung des Elements leicht realisieren, wenn Höhe und Breite des Elements unbekannt sind.

   <style>
        .container{
            position: relative;
        }
        .conter{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>

biegen

   <style>
        .container{
         display: flex;
         justify-content: center;
         align-items: center;
        }
        .conter{
            
        }
    </style>

12. Was sind die js-Datentypen und was ist der Unterschied?

Grundtypen: Zeichenfolge, Zahl, Boolescher Wert, Null, Undefiniert, Symbol, BigInt
Referenztyp: Objekt, Array
Grundtypen werden im Stapel gespeichert, was wenig Platz und häufige Vorgänge erfordert
Der Referenzdatentyp wird im Heap gespeichert und seine Adresse befindet sich im Stapel. Im Allgemeinen ist unser Zugriff seine Adresse

13. Was ist ein Symbol?

Es6 führt einen neuen primitiven Datentyp Symbol ein, der einen eindeutigen Wert darstellt

14. Was ist die Same-Origin-Richtlinie?

Die sogenannte Same-Origin-Richtlinie ist ein Sicherheitsmechanismus des Browsers, um die Kommunikation zwischen Websites unterschiedlicher Herkunft (gleicher Domänenname, gleiches Protokoll und gleiche Portnummer) einzuschränken.

15. Was ist ein Versprechen und welche Funktion hat es?

Promise ist ein Objekt, das asynchrone Betriebsinformationen von sich ändernden Objekten abrufen kann
Er kann das Problem der Rückrufhölle lösen, also das Problem der asynchronen tiefen Verschachtelung

16. Was ist Rekursion und welche Vor- und Nachteile hat die Rekursion?

Rekursion: Wenn die Funktion sich selbst intern aufrufen kann, ist die gesamte Funktion eine rekursive Funktion. Einfaches Verständnis: Die Funktion ruft sich intern auf und diese Funktion ist eine rekursive Funktion.
Vorteile: klare Organisation, gute Lesbarkeit
Nachteile: Geringe Effizienz, die Anrufstation kann überlaufen, tatsächlich reserviert jeder Funktionsaufruf Speicherplatz im Speicherstapel und der Inhalt des Stapels jedes Prozesses ist begrenzt. Wenn zu viele Aufrufebenen vorhanden sind, wird die Kapazität des Stapels überschritten, was zu einem Stapelüberlauf führt

17. Was ist der Unterschied zwischen let und const?

Der let-Befehl hat keine Variablenheraufstufung. Wenn er vor let verwendet wird, führt dies zu einem Fehler
Wenn im Blockbereich let- und const-Befehle vorhanden sind, wird ein geschlossener Bereich gebildet
Doppelte Anweisung nicht zulässig
const definiert Konstanten und kann nicht geändert werden. Wenn jedoch ein Objekt definiert ist, können die Daten im Objekt geändert werden

18. Vue-Leistungsoptimierung

funktionale Komponenten
Routing Lazy Loading
v-for muss den Schlüssel binden, der Schlüssel ist das einzige Zeichen eines virtuellen Doms. Es kann Vue dabei helfen, Seiten effizient und dynamisch zu rendern Vergleich, kein Vergleich zwischen Ebenen. Der Knoten wird zerstört, wenn sich der Schlüssel ändert, und die untergeordneten Knoten werden zuerst zerstört.
Berechnete Cache-Daten und Überwachung der Keep-Alive-Cache-Komponenten
Verwenden Sie v-if und v-for nicht gleichzeitig, v-show ist display, destroy ist display-none. v-if ist true zum Erstellen. false zum Zerstören.
Beim Entwerfen responsiver Vue-Daten darf das Design nicht zu tief gehen, da es vollständig rekursive Berechnungen durchführt.
Die Granularität der Komponenten kann nicht zu fein gestaltet werden. Sinnvolle Aufteilung. Je tiefer die Ebene, desto größer der Leistungsverbrauch
Anti-Shake-Drosselung
Die UI-Komponentenbibliothek wird bei Bedarf importiert

19..mvvm und mvc

m (Datenschicht) v (Ansichtsschicht) vm (Datenansicht-Interaktionsschicht) vereinfacht viele Dom-Operationen, nur für eine einzelne Seite, und verwendet Daten zur Anzeige der Ansichtsebene anstelle von Knotenoperationen.
MVC muss auch Dom erhalten, was die Leistung beim Rendern von Seiten und die Ladegeschwindigkeit verringert
Projektoptimierung, die man im Interview sagen kann:
Beim Entwerfen responsiver Vue-Daten darf das Design nicht zu tief gehen, da es vollständig rekursive Berechnungen durchführt.
Die Granularität der Komponenten kann nicht zu fein gestaltet werden. Sinnvolle Aufteilung. Je tiefer die Ebene, desto größer der Leistungsverbrauch

20. Routing-Modus: Hash und Verlauf

Implementierte Funktionen:

Ändern Sie die URL, ohne dass der Browser eine Anfrage an den Server sendet
URL-Änderungen erkennen
Fangen Sie die URL-Adresse ab und analysieren Sie die erforderlichen Informationen, um sie an die Routing-Regeln anzupassen

Für den Hash gilt eine Größenbeschränkung basierend auf dem URL-Parameter. Er wird nicht in die HTTP-Anfrage aufgenommen und hat keine Auswirkungen auf das Backend. Durch Ändern des Hashs wird die Seite nicht neu geladen. Der Verlauf kann Parameter in die URL einfügen und speichern Daten in einem bestimmten Objekt. Die Lösung für den weißen Bildschirm des Browsers im Verlaufsmodus besteht darin, eine Kandidatenressource hinzuzufügen, die alle Situationen auf der Serverseite abdeckt. Der Server muss über einen entsprechenden Modus auf dem Server verfügen, bevor er verwendet werden kann. Wenn die Wenn der Server nicht konfiguriert ist, können Sie zunächst den Standard-Hash verwenden.

21. Was sind die häufig verwendeten Tags in den Block- und Zeilenattributen? Was sind die Merkmale?

Block-Tags: div, h1~h6, ul, li, table, p, br, form.
Funktionen: Eine Zeile belegen, Anzeige umbrechen, Breite und Höhe können eingestellt werden, Blöcke und Zeilen können verschachtelt werden
Zeilenbeschriftungen: span, a, img, textarea, select, option, input.
Features: Wird nur in der Zeile angezeigt, der Inhalt wird gestreckt, um die Breite und Höhe zu erweitern, und die Breite und Höhe können nicht festgelegt werden (außer img, input, textarea usw.).

22. Der Unterschied zwischen == und ===

== ist nicht genau gleich
- gleichwertig
=== ist strikt gleich und vergleicht die Datentypen und Wertgrößen auf beiden Seiten
- Der Wert und die Referenzadresse sind gleich

23. Einschränkungen des strengen Modus

Variablen müssen deklariert werden, bevor sie verwendet werden können
Die Parameter der Funktion dürfen keine Attribute mit demselben Namen haben, andernfalls wird ein Fehler gemeldet
Die with-Anweisung kann nicht verwendet werden
Verbieten Sie, dass dies auf das globale Objekt verweist

24.git

git init initialisiert das Warehouse
Git-Klon-Klon
Git-Status Dateistatus überprüfen
git add. Dateien zum Staging-Bereich hinzufügen
git commit -m Beschreibungsinformationen

25.tcp- und udp-Protokolle

TCP ist sicherer. Das HTTP-Protokoll basiert auf TCP
UDP ist effizienter als TCP und es können leicht Daten verloren gehen

26. Fünf Vuex-Zustände

Mutationen (Ändern Sie die Daten im Status, aber er kann nur synchrone Operationen ausführen, asynchrone müssen in die Aktion geschrieben werden)
Zustand (Daten eingeben)
Aktion (eine asynchrone Operation ausführen)
Getter (berechnete Eigenschaft)
Moudel (ermöglicht die Aufteilung eines einzelnen Geschäfts in mehrere Geschäfte und die gleichzeitige Lagerung in einem einzigen Zustand)

Transfervorgang

Die Seite übermittelt Ereignisse asynchron über „mapAction“ an die Aktion. Die Aktion übermittelt die entsprechenden Parameter synchron durch Festschreiben an die Mutation, und die Mutation ändert den entsprechenden Wert im Status. Schließlich wird der entsprechende Wert über den Getter ausgeführt, und in der berechneten Eigenschaft der Seite wird der Wert im Status dynamisch über den MapGetter abgerufen

27. Was ist Anti-Shake und Throttling, wie geht js mit Anti-Shake und Throttling um?

Erstens besteht Anti-Shake darin, den Abfall des vorherigen Ereignisses zu stoppen, wenn das nächste Ereignis ausgelöst wird
Bei der Drosselung wird das aktuelle Ereignis nach dem Ende des vorherigen Ereignisses ausgelöst
Durch Einstellen des Gashebels (Timer)

28. Was ist Redraw und Reflow?

Neu zeichnen: Wenn sich der Inhalt und das Layout des Elements nicht geändert haben, sich jedoch das Erscheinungsbild des Elements (Hintergrundfarbe) geändert hat, wird es neu gezeichnet
Reflow: Wenn sich ein Teil des Inhalts oder Layouts ändert, wird beim Neuaufbau der Seite ein Reflow generiert
Reflow führt definitiv zu einem Neuzeichnen, aber ein Neuzeichnen führt nicht unbedingt zu einem Reflow

29. CSS-Priorität

!importent > inline > id > Klassen, Pseudoklassen, Attribute > Tags, Pseudoelementselektoren > Vererbung und Platzhalter

30. So lösen Sie den Zusammenbruch einer Box

Legen Sie den oberen Rand des übergeordneten Felds fest
Überlauf versteckt
Sub-Box-Off-Etikett
Polsterung auf der übergeordneten Box

31. Floating-Methode löschen

Es gibt 5 Methoden

Höhe des übergeordneten Box-Sets
Überlauf versteckt
Pseudoelement
doppeltes Pseudoelement
Fügen Sie am Ende des übergeordneten Felds ein leeres Feld hinzu und legen Sie „clear:both“ fest

32. Unterschied zwischen Split() und join()?

Die geteilte Zeichenfolge wird in ein Array konvertiert und die Parameter werden durch eine bestimmte Zeichenfolge getrennt
Das Join-Array wird in einen String-Parameter konvertiert, der angibt, womit der konvertierte String verbunden werden soll

33. Array-Deduplizierung

1. Verwenden Sie Double for-Schleifen und deduplizieren Sie dann mit der Spleißmethode der Array-Methode (es5 wird häufig verwendet).

2. Deduplizierung festlegen: Bereiten Sie ein Array vor, dekonstruieren Sie das Newset und bereiten Sie dann eine Funktion vor, um die Variablen des Arrays als Beurteilungswert der Funktion zu speichern und zurückzugeben

Array.from(new set(arr))

3. Array-Methode indexof

4. Array-Methode sort Obj[a]-Obj[b]

34. Was verursacht Speicherlecks?

Unsachgemäße Verwendung globaler Variablen (Variablen nicht deklariert)
Unsachgemäße Verwendung von Verschlüssen
Timer/Verzögerer nicht gelöscht
Ungereinigte DOM-Elementreferenzen (Ereignisse werden nicht gelöscht, wenn DOM geleert oder gelöscht wird)

35. Welche Hook-Funktionen werden beim ersten Laden der Seite ausgelöst?

beforeCreate
Die erstellte Dateninitialisierung ist abgeschlossen, die Methode wird ebenfalls aufgerufen, das DOM wird jedoch nicht gerendert
beforeMount
gemountetes DOM und Daten bis zum Abschluss

36. Was sind die 5 Kerneigenschaften von Vuex?

Zustand => Grunddaten
Getter => aus Basisdaten (Zustand) abgeleitete Daten, die der berechneten Eigenschaft des Zustands entsprechen
Mutationen => Methode zum Übermitteln geänderter Daten, synchronisieren!
actions => ist wie ein Dekorator, der Mutationen umschließt, um sie asynchron zu machen.
Module => Modulares Vuex
Beschreiben Sie kurz den vuex-Datenübertragungsprozess

Die Seite übermittelt Ereignisse asynchron über „mapAction“ an die Aktion. Die Aktion übermittelt die entsprechenden Parameter synchron durch Festschreiben an die Mutation, und die Mutation ändert den entsprechenden Wert im Status. Schließlich wird der entsprechende Wert über den Getter ausgeführt, und in der berechneten Eigenschaft der Seite wird der Wert im Status dynamisch über den MapGetter abgerufen

37. Der Unterschied zwischen get und post

Derselbe Punkt.
Die unterste Ebene von Get-Request und Post-Request basiert auf dem TCP/IP-Protokoll. Durch die Verwendung eines der beiden kann der wesentlichste Unterschied zwischen der bidirektionalen Interaktion zwischen Client und Server realisiert werden
.

Konventionen und Spezifikationen:
Spezifikation: Definieren Sie, dass GET-Anforderungen zum Abrufen von Ressourcen verwendet werden, d. h. Abfragevorgänge, und POST-Anforderungen zum Übertragen von Entitätsobjekten verwendet werden, die für Hinzufügungs-, Lösch- und Änderungsvorgänge verwendet werden
Konvention: GET-Anfragen fügen Parameter zur Parameterübertragung in die URL ein. POST-Anfragen schreiben Parameter zur Übertragung in den Anfragetext

Unwesentlicher Unterschied

Cache ist anders, get wird zwischengespeichert
Die Parameterlängenbeschränkung ist unterschiedlich. Die Parameter der Get-Anfrage werden über die URL übergeben, und die Länge der URL ist begrenzt, normalerweise 2 KB. Die Parameter der Post-Anfrage werden im Anfragetext gespeichert und es gibt keine Größenbeschränkung
Rollback und Aktualisierung sind unterschiedlich. Get-Anfragen können direkt zurückgesetzt und aktualisiert werden, ohne dass sich dies auf Benutzer und Programme auswirkt. Wenn Post-Anfragen direkt zurückgesetzt und aktualisiert werden, werden die Daten erneut übermittelt
Die Verlaufsdatensätze sind unterschiedlich. Die Parameter der Get-Anfrage werden im Verlaufsdatensatz gespeichert, die Parameter der Post-Anfrage jedoch nicht
Lesezeichen sind unterschiedlich. Die von get angeforderte Adresse kann mit einem Lesezeichen versehen werden, jedoch nicht per Post

38. Cross-Domain

Domänenübergreifende Gründe: Browser schützen Ressourcen aus Sicherheitsgründen, Same-Origin-Richtlinie. (Protokoll, Domänenname, Portnummer)
Domänenübergreifend lösen:
jsonP kann jedoch nur das Get-Prinzip verwenden – setzen Sie die angeforderte Schnittstelle auf das src-Attribut des Skript-Tags und übergeben Sie eine Funktion an den Hintergrund, um domänenübergreifend zu erreichen. Die Hintergrundantwort ist ein Funktionsaufruf
cors: am häufigsten verwendet.
Reverse-Proxy: Das lokale Front-End sendet ohne domänenübergreifende Übertragung an das lokale Back-End (gleicher Ursprung). Das lokale Back-End leitet die Anforderung nach Erhalt an andere Server weiter (es erfolgt keine domänenübergreifende Übertragung zwischen dem Server und dem Server). Der Proxy benötigt ein spezielles Flag im Pfad.

39. Der Unterschied zwischen den drei Speicherarten

Die gesetzte Ablaufzeit des Cookies wird gelöscht, auch wenn das Fenster oder der Browser geschlossen wird
localStorage verfügt über eine große Speicherkapazität und speichert persistente Daten. Nach dem Schließen des Browsers gehen die Daten nicht verloren, es sei denn, sie werden manuell gelöscht
sessionStorage wird vorübergehend gespeichert und der gespeicherte Inhalt wird automatisch gelöscht, wenn der Browser geschlossen wird

Speichergröße:

Die Größe der Cookie-Daten darf 4 KB nicht überschreiten
Obwohl auch für sessionStorage und localStorage Speichergrößenbeschränkungen gelten, ist ein einzelnes Cookie viel größer und kann 5 m oder mehr erreichen

40. Wie Dom die Kommunikation zwischen mehreren Registerkarten im Browser implementiert

websocket.SharedWoeket;
Es können auch lokale Speichermethoden wie localStorage und Cookies aufgerufen werden. Wenn localStorage in einem anderen Browserkontext hinzugefügt, geändert oder gelöscht wird, löst es ein Ereignis aus. Wir hören das Ereignis ab und steuern seinen Wert für die Seiteninformationskommunikation.
Beachten Sie die Besonderheiten: Safari löst die Ausnahme „quotaExceededError“ aus, wenn der Wert „localStorage“ im Inkognito-Modus festgelegt wird

41. Bitte teilen Sie mir die Verwendung jedes Ordners und jeder Datei im src-Verzeichnis im vue.cli-Projekt mit.

Der Assets-Ordner ist für statische Ressourcen vorgesehen.
Komponenten sind quadratische Komponenten;
Router ist die Definition einer Routing-bezogenen Konfiguration
Ansicht ist die Ansicht
app.vue ist eine Hauptkomponente der Anwendung
main.js ist die Eintragsdatei

42. Der Unterschied zwischen $route und $router

Router ist eine Instanz von VueRouter, die einem globalen Router-Objekt entspricht, das viele Attribute und Unterobjekte enthält, z. B. ein Verlaufsobjekt. . . Häufig verwendete Jump-Links können this.$router.push verwenden, was dem Router-Link-Jump entspricht.

Route entspricht dem Routing-Objekt, das gerade umgeleitet wird. . Sie können daraus Namen, Pfad, Parameter, Abfragen usw. abrufen

43. Prinzip der virtuellen Dom-Implementierung

Simulieren Sie den echten DOM-Baum mit JavaScript-Objekten und abstrahieren Sie das echte DOM
Diff-Algorithmus: Vergleichen Sie die Unterschiede zwischen zwei virtuellen Bäumen
Pach-Algorithmus: Wenden Sie die Differenz zweier virtueller DOM-Objekte auf den realen DOM-Baum an

44. Der Unterschied zwischen gewöhnlichen Funktionen und Pfeilfunktionen

Pfeilfunktionen haben keinen Prototyp, der Prototyp ist undefiniert
Die Pfeilfunktion zeigt dabei auf das globale Objekt, während die Funktion auf das Referenzobjekt zeigt
Die Methoden call, apply und bind können die Richtung der Pfeilfunktion nicht ändern

45. Wie man den Datenfluss einzelner Elemente in Vue versteht

Daten werden immer von der übergeordneten Komponente an die untergeordnete Komponente übergeben. Die untergeordnete Komponente hat kein Recht, die von der übergeordneten Komponente übergebenen Daten zu ändern, und kann nur die übergeordnete Komponente auffordern, die Originaldaten zu ändern.

46. Slot-Slot

Der Steckplatzsteckplatz kann so verstanden werden, dass der Steckplatz die Position im Voraus in der Komponentenvorlage einnimmt. Wenn die Komponente wiederverwendet wird und das entsprechende Steckplatzetikett verwendet wird, ersetzt der Inhalt des Etiketts automatisch die Position des entsprechenden Steckplatzetiketts im Komponentenvorlage, als Trägerverteilungsexport von Inhalten
Die Hauptfunktion besteht darin, Komponenten wiederzuverwenden und zu erweitern sowie benutzerdefinierte Komponenten zu verarbeiten

47. Allgemeine Vue-Anweisungen

Das V-Modell wird hauptsächlich für Formularelemente verwendet, um eine bidirektionale Datenbindung zu realisieren

v-bind: Abgekürzt als: Bindet die Eigenschaften einiger Elemente dynamisch. Der Typ kann sein: Zeichenfolge, Objekt oder Array.

v-on:click bindet eine Funktion an die Bezeichnung, die als @ abgekürzt werden kann. Beispielsweise muss die Bindung einer Klickfunktion in Methoden geschrieben werden

v-for-Format: v-for="Feldname in (von) Array JSON" Schleifenarray oder JSON

V-Show-Anzeigeinhalt

Befehl v-else: Wird mit dem Befehl v-if verwendet, es gibt keinen entsprechenden Wert. Wenn der Wert von v-if falsch ist, wird v-else gerendert

v-if-Anweisung: Der Wert ist wahr/falsch, ob das Steuerelement gerendert werden muss

v-else-if muss in Verbindung mit v-if verwendet werden

Befehl v-else: Wird mit dem Befehl v-if verwendet, es gibt keinen entsprechenden Wert. Wenn der Wert von v-if falsch ist, wird v-else gerendert

V-Text-Parsing-Text

v-html analysiert HTML-Tags

v-bind:class Drei Bindungsmethoden 1. Objekttyp '{red:isred}' 2. Ternärer Typ 'isred?"red":"blue"' 3. Array-Typ '[{red:"isred"} ,{blue :"ist blau"}]'

v-once wird beim Betreten der Seite nur einmal gerendert und nicht gerendert

V-Cloak verhindert Flackern

v-pre gibt die Elemente innerhalb des Tags vor Ort aus

48. Die Rolle des Keep-Alive in Vue

< Keep-Alive > ist eine integrierte Komponente von Vue, die den Status während des Komponentenwechsels im Speicher halten und ein wiederholtes Rendern von DOM verhindern kann.
< Keep-Alive > Beim Umschließen dynamischer Komponenten werden inaktive Komponenteninstanzen zwischengespeichert, anstatt zerstört zu werden.

49. Das Prinzip der vue-Zwei-Wege-Bindung

Die bidirektionale Bindung von Vue-Daten wird durch Datenhijacking in Kombination mit dem Publisher-Subscriber-Modus realisiert. Sein Kern besteht darin, die Set- und Get-Funktionen über die Methode Object.defineProperty() festzulegen, um Daten-Hijacking zu implementieren, Nachrichten an Abonnenten zu veröffentlichen, wenn sich Daten ändern, und entsprechende Überwachungsrückrufe auszulösen. Das heißt, die Daten und die Ansicht werden synchronisiert. Wenn sich die Daten ändern, ändert sich die Ansicht entsprechend, und wenn sich die Ansicht ändert, ändern sich auch die Daten entsprechend.