Die vierte Runde der Jobsuche – persönliches Vue-Erlebnis

1. Vue-Lebenszyklus

1. Definition des Lebenszyklus: Der Prozess von der Erstellung bis zur Zerstörung einer Vue-Instanz ist der Lebenszyklus. Das heißt, eine Reihe von Prozessen vom Beginn der Erstellung über die Initialisierung von Daten, die Kompilierung von Vorlagen, das Mounten von Dom → Rendern, Aktualisieren → Rendern, Entladen usw. Wir nennen dies den Lebenszyklus von Vue.

2.Details:

vorErstellen:

对应的钩子函数为beforeCreate。此阶段el和data都还没有形成。

erstellt:

在这个阶段vue实例已经创建，仍然不能获取DOM元素。

created可以获取到props、data中定义的值。但是el还没有形成。所以也没有渲染DOM。

beforeMount:

但是el和data都已经存在了，只是还未挂载。页面呈现的是未经编译的DOM结构，所有对DOM的操作，都不奏效。

montiert:

mounted是平时我们使用最多的函数了，一般我们的异步请求都写在这里。在这个阶段，数据和DOM都已被渲染出来。

此时，页面中呈现的是Vue编译后的DOM，对DOM的操作有效，但是要避免对DOM的操作。至此初始化结束。我们可以在这个阶段，开启定时器、发送网络请求、订阅消息、绑定自定义事件等。

vor dem Update:

当数据发送改变，页面尚未和数据保持同步。数据新，页面旧。

Aktualisiert:

数据是新的，页面也是新的，页面和数据保持同步。

beforeDestroy:

销毁前，关闭定时器，取消订阅消息，解绑自定义事件等收尾操作。

zerstört:

销毁了。

销毁后借助Vue开发者工具无法看到任何信息；
自定义事件失效；
一般不会再操作注册，即使操作数据，也不会再触发更新流程。

3.Gemeinsamer Lebenszyklus:
gemountet: Ajax-Anfrage senden; Timer starten; benutzerdefiniertes Ereignis binden; Nachricht abonnieren usw.;
beforeDestroy: Timer löschen; benutzerdefiniertes Ereignis aufheben; Nachricht abbestellen usw.;

Es ist zu beachten, dass, wenn es Unterkomponenten in einer Komponente gibt, die Unterkomponenten gemountet werden, bevor die übergeordnete Komponente gemountet wird, aktualisiert werden, bevor die übergeordnete Komponente aktualisiert wird, und zerstört werden, bevor die übergeordnete Komponente zerstört wird.

4. Wenn die Seite zum ersten Mal geladen wird,
lösen Sie beforeCreate, Created, beforeMount, Mounted aus

5. $nextTick: Betreiben Sie das DOM sofort nach der Aktualisierung der Daten.

2. Responsive-Prinzip

Der Schlüssel zum Reaktionsprinzip von Vue2 ist Object.defineProperty, das die Eigenschaften in Daten neu definiert und eine Abfangfunktion für das Abrufen und Festlegen von Daten festlegt. Wenn der Setter aktualisiert wird, werden die entsprechenden Abhängigkeiten benachrichtigt, um die Ansicht zu aktualisieren. Um Reaktionsfähigkeit zu erreichen.

Das Responsive-Prinzip von Vue3 nutzt jede Eigenschaft im Proxy-Objekt des Proxy-Objekts.

3. Routing-Cache

Das Routen-Caching kann verbessert werden, um die Anwendungseffizienz zu verbessern.

Cache-Methode: Keep-Alive-Tag.

Die Platzierung von router-view innerhalb des Tags ermöglicht ein einfaches Daten-Caching.

    <keep-alive>
        <router-view></router-view>
    </keep-alive>

Es ist zu beachten, dass Keep-Alive über ein Include-Attribut verfügt, mit dem die Daten einzelner Komponenten zwischengespeichert werden können. include gefolgt vonKomponentennameWenn es mehrkomponentig ist, folgt ihm ein Array mit Komponentennamen.

Es ist außerdem zu beachten, dass die Lebenszyklusfunktion der Routing-Komponente eine aktivierte und eine deaktivierte Funktion hat. Durch diese beiden Lebenszyklusfunktionen können wir die Lebenszyklusfunktionen von zwei Hauptkomponenten implementieren: Aktivieren Sie den Timer, wenn die Nachrichtenkomponente erscheint, und zerstören Sie den Timer, wenn die Nachrichtenkomponente weggeschnitten wird.

4. Die Rolle des Schlüssels im virtuellen DOM

Der Schlüssel ist die Objektkennung des virtuellen DOM. Wenn sich die Daten im Status ändern, generiert Vue ein neues virtuelles DOM entsprechend den neuen Daten; dann vergleicht Vue das neue virtuelle DOM mit dem alten virtuellen DOM:

Der gleiche Schlüssel wie das neue virtuelle DOM befindet sich im alten virtuellen DOM. Wenn sich der Inhalt im virtuellen DOM nicht geändert hat, wird das reale DOM direkt verwendet; wenn sich der Inhalt des virtuellen DOM geändert hat, wird ein neues virtuelles DOM verwendet generiert werden, und dann wird das vorherige DOM auf der Seite ersetzt.

Wann sollte ein Schlüssel ausgewählt werden:
Es ist am besten, die eindeutige Kennung jedes Datenelements als Schlüssel zu verwenden; es gibt keine Operation, die die Reihenfolge zerstört, er wird nur zum Rendern der Liste zur Anzeige verwendet, und der Index kann verwendet werden.

5. Diff-Vergleichsalgorithmus

Theoretisch ist die Reaktionsfähigkeit von Vue so, dass die Vorlage neu gerendert wird, wenn sich die Daten ändern. Um die Leistung der Anwendung zu verbessern, muss das DOM in einigen Fällen nicht vollständig gerendert werden. Dies ist untrennbar mit dem Diff-Algorithmus verbunden.

Die aktuelle Situation entspricht einem virtuellen DOM. Sobald die Daten aktualisiert sind, wird ein neues virtuelles DOM generiert. Unter Verwendung des Schlüssels als Objektkennung des virtuellen DOM werden die beiden virtuellen DOMs verglichen und ihre Knoten zum Vergleich aus den Knoten der Knoten extrahiert, was dem Tiefendurchlaufalgorithmus des Diagramms entspricht. Eins-zu-eins-Vergleich: Wenn das alte virtuelle DOM fehlt, wird es hinzugefügt, und wenn das alte virtuelle DOM zu groß ist, wird es gelöscht.

Wenn Sie die oben genannten Schritte ausführen und dann auf der vorherigen Basis rendern, ist die Geschwindigkeit schneller und die Leistung besser.

6. MVVM und MVC

MVVM, Model-View-ViewModel. Model-View-ViewModel.

M und V sind über die VM-Brücke verbunden, wodurch die Trennung von Modell und Ansicht realisiert wird. Und die Kommunikation zwischen MVs verwendet eine bidirektionale Bindung, V->M verwendet die Dom-Ereignisüberwachung und M->V verwendet eine unidirektionale Datenbindung.

MVC ist eine unidirektionale Kommunikation. V-> M muss einen Controller verwenden, um die Kommunikation zu erreichen.

Der größte Unterschied zwischen den beiden besteht darin, dass MVVM die Datensynchronisation realisiert. DOM-Elemente müssen nicht manuell geändert werden, DOM-Elemente werden automatisch synchronisiert.

7. Warum sollten Sie sich für die Vue-Entwicklung entscheiden?

Einfach zu bedienen, ausgereifte Dokumentation und Tutorials, schnell zu erlernen;

Es gibt viele Komponentenbibliotheken, umfangreiche Stile und gute Effekte;

Gerüstbauprojekte sind sehr praktisch;

Die Wiederverwendbarkeit der Komponenten ist hoch, die Leistung ist gut und der Betrieb ist schnell.

8. Übergabe von Werten zwischen Komponenten

Übergeordnete und untergeordnete Komponenten übergeben Werte, die übergeordnete Komponente verwendet eine unidirektionale Datenbindung und die Props-Deklaration der untergeordneten Komponente akzeptiert; die Enkelkomponente
übergibt Werte, die Vorgängerkomponente verwendet „Bereitstellen“, um Daten bereitzustellen, und die Enkelkomponente verwendet „Inject“, um Daten zu empfangen.

Übergabewert der untergeordneten übergeordneten Komponente, benutzerdefiniertes Ereignis, Festlegen eines benutzerdefinierten Ereignisses für die untergeordnete Komponente in der übergeordneten Komponente. Die untergeordnete Komponente löst das benutzerdefinierte Ereignis mithilfe von Emit aus und übergibt die Daten an die übergeordnete Komponente. Das untergeordnete Element kann auch ref to verwenden Übergeben Sie den Wert an die
übergeordnete Komponente, legen Sie einen Verweis auf die untergeordnete Komponente in der übergeordneten Komponente fest und binden Sie ein benutzerdefiniertes Ereignis über $refs an die untergeordnete Komponente, lösen Sie es in der untergeordneten Komponente aus, und die übergeordnete Komponente kann den Wert auch vom untergeordneten Element empfangen Komponente.

Das Event-Auto $bus kann auf diese Weise Komponenten gemeinsam nutzen. Das Prinzip besteht darin, das Event-Auto auf dem Prototyp von Vue zu platzieren, und alle Komponenten können darauf zugreifen; Vuex kann auch den Werttransfer
zwischen Geschwisterkomponenten realisieren.

9. Definition der Komponenten

Definieren Sie zunächst eine Vue-Datei im Komponentenordner.

Global oder in einer einzelnen Komponente einführen und benennen;

Wenden Sie den oben genannten Namen als Tag-Namen auf die Komponente an.

10. Verwendung von Plug-Ins

Die Verwendung des Plug-Ins besteht darin, das Plug-In zuerst über npm herunterzuladen.

Verwenden Sie dann Vue.use() in main.js

11. Verwendung von scss

Scaffolding kann scss automatisch installieren.

Markieren Sie nach der Installation scss hinter dem Style-Tag und verwenden Sie es. Das Gleiche gilt für weniger.

12. Sprechen Sie über den Vue-Skelettbildschirm

Die Funktion des Skelettbildschirms besteht darin, das Benutzererlebnis in schwachen Netzwerken zu optimieren. Wenn das Benutzernetzwerk schlecht ist, klicken Sie hinein, um das Grundgerüst einer Seite anzuzeigen.

Methode 1: Schreiben Sie in die Vorlagendatei mit der ID „app“ den gewünschten HTML-Effekt.

Der Skelettbildschirm kann über ein Plug-In automatisch gerendert werden.

13. Die Stile der einzelnen Komponenten beeinflussen sich nicht gegenseitig

Fügen Sie einfach das Bereichsattribut hinzu.

14.v-if和v-show

Ihnen folgen bedingte Urteilsaussagen.

Ihre Manipulationsprinzipien zum Ausblenden und Anzeigen von Elementen sind jedoch unterschiedlich. v-show zeigt Elemente durch Anzeige an und verbirgt sie; v-if zerstört Elemente direkt oder baut sie neu auf.

15. Warum kann v-if nicht zusammen mit v-for verwendet werden?

Diese beiden Prioritäten sind in vue2 und vue3 unterschiedlich, was leicht zu Verwechslungen führen kann. Seien Sie also vorsichtig, wenn Sie es verwenden.

16. Relevante Rezension von Vuex

1. Was ist Vuex?
Zustandsverwaltung und Datenaustausch in Vue.

2. Attribute in Vuex: Zustand, Mutation, Aktion, Getter

3. Die Rolle von Attributen:
Status ist der Speicherort der Datenquelle, der den Daten im allgemeinen Vue-Objekt entspricht;
Getter können Berechnungsvorgänge für Status ausführen, der das Berechnungsattribut von Store ist;
Mutation speichert intern den Synchronisierungsvorgang für Daten. und verwendet im Allgemeinen $store .commit zum Aufrufen;
die Aktion speichert asynchrone Vorgänge im Inneren, und asynchrone Vorgänge werden mit Commit für den Betrieb an Mutationen übergeben, die im Allgemeinen mit $store.dispatch aufgerufen werden;

17. Routing-Parameter

Verwendet für:
dynamisches Routing;
Namensabgleich, Parme-Parameterübergabe;
Pfadabgleich, Abfrageparameterübergabe;

query ähnelt eher dem Abrufen von Parametern in Ajax und params ähnelt post. Vereinfacht ausgedrückt zeigt ersteres Parameter in der Adressleiste des Browsers an, letzteres jedoch nicht.

18.berechnete, beobachtende, Methoden

Methoden: Wird hauptsächlich zum Schreiben von Geschäftslogik verwendet, bei der es sich um eine bestimmte Operation handelt. ist ein Funktionsaufruf;

berechnet: Die durch berechnet definierte Methode wird in Form eines Attributzugriffs aufgerufen, und das Ergebnis des Attributs wird zwischengespeichert. Sofern sich das abhängige Antwortattribut nicht ändert, wird es neu berechnet und hauptsächlich als Attribut verwendet.

Das Prinzip des berechneten Caches: Der wichtigste Punkt bei der Steuerung des Caches im berechneten Cache besteht darin, dass schmutzige Daten als schmutzig markiert werden und schmutzige Daten ein Attribut des Beobachters sind.

watch Ein Objekt, der Schlüssel ist der zu beobachtende Ausdruck und der Wert ist die entsprechende Rückruffunktion. Es wird hauptsächlich zur Überwachung der Änderungen bestimmter Daten verwendet, um bestimmte Geschäftslogikoperationen auszuführen. wird nicht zwischengespeichert. Wir können watch auch verwenden, um einige asynchrone Vorgänge auszuführen.

19.nächsterTick

Der nextTick in vue wird hauptsächlich verwendet, um das Problem zu lösen, dass das DOM nach dynamischen Datenänderungen nicht rechtzeitig aktualisiert wurde, und nextTick kann verwendet werden, um die neuesten DOM-Änderungen nach der Datenaktualisierung abzurufen.

Verzögern Sie den Aufruf der Rückruffunktion nach der nächsten Dom-Aktualisierungsdaten.

20.Vue.use()

Vue.use wird zur Installation einiger Plugins verwendet. Verwenden Sie das Plugin über die globale Methode Vue.use(). Vue.use verhindert automatisch die mehrfache Registrierung desselben Plugins

21. Gemeinsame Anforderungsheader und Antwortheader

Anforderungsheader, der zur Beschreibung zusätzlicher Informationen verwendet wird, die vom Server verwendet werden sollen:

Akzeptieren, Das Anforderungsheaderfeld wird verwendet, um anzugeben, welche Arten von Informationen der Client akzeptieren kann.

Accept-Language: Wird verwendet, um den für den Client akzeptablen Sprachtyp anzugeben.

​​​​​​Host, Host-IP und Portnummer;

​​​​​​​​​​Referer,​​​​​​​​Dieser Inhalt wird verwendet, um zu identifizieren, von welcher Seite die Anfrage gesendet wird. Der Server kann diese Informationen abrufen und entsprechende Verarbeitung durchführen, z. B. Quellstatistiken erstellen , Anti-Blutegel-Verarbeitung usw.

Antwortheader, der zur Beschreibung der Daten der Antwort verwendet wird:

Content-Language: Beeinflusst die im Inhalt verwendete Sprache.

Inhaltslänge, die Länge des Antwortnachrichtentextes.

22. Terminalübergreifende Interaktion zwischen h5 und app

hat seine eigene Methode.

23.