Zusammenfassung der neuesten 50 Vue-Interviewfragen mit Antworten auf Vue2+vue3 im Jahr 2023

Dieser Artikel wird ständig aktualisiert und kann gerne im Kommentarbereich hinzugefügt werden

1. Was ist MVVM?

M – Modelldaten: Dies ist der Kapselungsträger der Daten, die sich auf die Geschäftslogik der Anwendung beziehen.
V – Ansichtsansicht: Sie konzentriert sich auf die Anzeige und das Rendering der Schnittstelle.
VM – Ansichtsmodellansichtsdaten: Sie ist der Klebstoff von Ansicht und Modell, verantwortlich für Die Interaktion und Zusammenarbeit zwischen View und Model
Vue. Die bidirektionale Datenbindung wird durch Daten-Hijacking in Kombination mit dem Publish-Subscribe-Modus erreicht, dh Daten und Ansicht werden synchronisiert, Datenänderungen, Ansichtsänderungen, Ansichtsänderungen, und Daten treten auch auf Änderung;
Kern: Über die bidirektionale Datenbindung von VUE ist der Kern die Methode Object.defineProperty() und die Methode get set.
Das bekannteste Merkmal von MVVM ist die Datenbindung. Die Kernidee besteht darin, die Ansichtsschicht durch deklarative Datenbindung von anderen Schichten zu trennen. Das Konzept der vollständigen Entkopplung der View-Ebene erleichtert auch das Schreiben von Testfällen für das Web-Frontend.
Eines der wichtigsten Merkmale von MVVM ist die bidirektionale Bindung von Daten, während React ein einseitiger Datenfluss mit zustandsgesteuerter Ansicht ist, kein reines VM-Gefühl hat und nur Attribute und Zustände zur Zuordnung verwendet Ansichten, was offensichtlich nicht MVVM ist. Top More ist die V-Schicht in MVVM. Für Vue Technisch gesehen konzentriert sich Vue.js hauptsächlich auf die ViewModel-Schicht des MVVM-Musters. Es verbindet die Ansicht und das Modell durch bidirektionale Datenbindung. Es ähnelt eher MVVM, stimmt jedoch nicht vollständig mit MVVM überein. Bei der Umsetzung wurden nur einige Ideen von MVVM übernommen.
Ansicht und Modell können im Rahmen von MVVM nicht direkt kommunizieren. Sie kommunizieren über das ViewModel. Das ViewModel implementiert normalerweise einen Beobachter. Wenn sich die Daten ändern, kann das ViewModel die Änderung der Daten überwachen und dann die entsprechende Ansicht zur automatischen Aktualisierung benachrichtigen. Wenn der Benutzer die Ansicht bedient, kann das ViewModel auch überwachen Um die Ansicht zu ändern und dann die Daten zu benachrichtigen, um die Änderung vorzunehmen, wird tatsächlich die bidirektionale Bindung der Daten realisiert. Und View und ViewModel in MVVM können miteinander kommunizieren

2. Was ist MVC?

• M – Modelldaten: Dateneinheit, die zum Speichern der auf der Seite anzuzeigenden Daten verwendet wird. Zum Beispiel die von Ajax erhaltenen Daten.
• V – Ansichtsansicht, eine Seite, die Daten anzeigt, normalerweise HTML.
• C – Controller Controller: Steuert die gesamte Geschäftslogik und ist für die Datenverarbeitung verantwortlich, beispielsweise für die Datenerfassung und Datenfilterung, was sich wiederum auf die Anzeige der Daten in der Ansicht auswirkt.
MVC ist eine der am weitesten verbreiteten Softwarearchitekturen. Im Allgemeinen ist MVC unterteilt in: Model (Modell), View (Ansicht) und Controller (Controller). Dies basiert hauptsächlich auf dem Zweck der Schichtung, sodass die Verantwortlichkeiten voneinander getrennt sind. View verwendet im Allgemeinen Controller, um mit Model zu kommunizieren. Der Controller ist der Koordinator von Modell und Ansicht, und Ansicht und Modell sind nicht direkt miteinander verbunden. Im Grunde eine einseitige Verbindung. M und V haben die gleiche Bedeutung wie M und V in MVVM. C bedeutet, dass sich Controller auf die Seitengeschäftslogik bezieht. MVC ist eine einseitige Kommunikation. Das heißt, die Ansicht und das Modell müssen über den Controller verbunden werden.

3. Sprechen Sie über den Unterschied zwischen MVVM und MVC

„Der Unterschied zwischen MVVM und MVC ist wie folgt: 1. Die Kommunikation zwischen jedem Teil von MVVM erfolgt in zwei Richtungen, während die Kommunikation zwischen jedem Teil von MVC in eine Richtung erfolgt. 2. MVVM trennt die Seiten- und Datenlogik tatsächlich in JS zu erreichen, während in mvc Nicht getrennt.“
MVC ermöglicht das Ändern der Art und Weise, wie die Ansicht auf Benutzereingaben reagiert, ohne die Ansicht zu ändern. Die Vorgänge des Benutzers in der Ansicht werden zur Verarbeitung an den Controller übergeben, und der Controller reagiert auf die Ereignisse der Zeigen Sie an, indem Sie die Schnittstelle des Modells aufrufen, um die Daten zu bearbeiten. Sobald sich das Modell ändert, werden die relevanten Ansichten zur Aktualisierung benachrichtigt.
Der spezifische Evolutionsprozess: traditionelles MVC ——> MVP ——> MVVM

4. Unterschiede zwischen vue3 und vue2

1. Refactoring des reaktionsfähigen Systems, Proxy verwenden, um das Object.defineProperty-Attribut zu ersetzen, Vorteile:

- Proxy可直接监听 对象`添加/删除`属性;

- Proxy直接监听 数组的变化

- Proxy监听的目标是对象本身，不需要像Object.defineProperty那样遍历每个属性，有一定的性能提升

2. Neu 组合式API(Composition API), bessere Wiederverwendung der Logik und Codeorganisation:

- setup配置

- ref与reactive

- watch与watchEffect

- provide与inject

3. Rekonstruieren Sie das virtuelle DOM und den Diff-Algorithmus

4. Umbenennung des Lebenszyklus

Vue3.0 stellt Lebenszyklus-Hooks in Form einer Composition-API bereit, und die entsprechende Beziehung zu den Hooks in Vue2.x ist wie folgt:

beforeCreate ===> setup()

erstellt ===> setup()

beforeMount ===> onBeforeMount

mount ===> onMounted

beforeUpdate ===> onBeforeUpdate

aktualisiert ===> onUpdated

beforeUnmount===> onBeforeUnmount

unmontiert ===> onUnmounten

5. Neue integrierte Komponenten: Fragment, Teleport, Suspense

6. Entfernen:

- 移除v-on.keyCode修饰符，同时也不再支持config.keyCodes

- 移除v-on.native修饰符,

- 移除过滤器（filter）

- `不`再建议使用mixins, 组合式函数本身就是更好的mixin代替品

5. Reaktionsprinzip von vue2.x

• Objekttyp: Lesen und Ändern von Eigenschaften durch Object.defineProperty() abfangen (Datenentführung)

• Array-Typ: Das Abfangen wird durch Überschreiben einer Reihe von Methoden zum Aktualisieren des Arrays erreicht. (Die Änderungsmethode des Arrays ist umschlossen).

• Es gibt Probleme:

1. Beim Hinzufügen oder Löschen von Attributen wird die Schnittstelle nicht aktualisiert.

2. Ändern Sie das Array direkt über den Index, und die Schnittstelle wird nicht automatisch aktualisiert.

Ergänzung: $set in vue2 kann diese Probleme lösen.

6. Reaktionsprinzip von vue3.0

• Durch Proxy (Proxy): Abfangen der Änderung aller Attribute im Objekt, einschließlich: Lesen, Schreiben, Hinzufügen, Löschen usw. des Attributwerts.

• Durch Reflect (Reflexion): Bearbeiten Sie die Eigenschaften des Quellobjekts.

new Proxy(data, {
    
    

    // 拦截读取属性值

    get (target, prop) {
    
    

        return Reflect.get(target, prop)

    },

    // 拦截设置属性值或添加新属性

    set (target, prop, value) {
    
    

        return Reflect.set(target, prop, value)

    },

    // 拦截删除属性

    deleteProperty (target, prop) {
    
    

        return Reflect.deleteProperty(target, prop)

    }

})

proxy.name = 'tom' 

7. Warum in Vue3.0 die Proxy-API anstelle der defineProperty-API verwenden?

a. Die größte Einschränkung der defineProperty-API besteht darin, dass sie nur Singleton-Eigenschaften überwachen kann.

Die reaktionsfähige Implementierung in Vue2.x basiert auf dem Deskriptor in defineProperty. Sie durchläuft und rekursiert die Attribute in Daten und legt Getter und Setter für jedes Attribut fest.
Aus diesem Grund kann Vue nur auf die vordefinierten Attribute in Daten reagieren. Die Verwendung von Indizes in Vue, um den Wert eines Attributs direkt zu ändern oder ein bereits vorhandenes Objektattribut hinzuzufügen, kann nicht von einem Setter überwacht werden. Dies ist eine Einschränkung von defineProperty.
b. Die Überwachung der Proxy-API zielt auf ein Objekt ab, sodass alle Vorgänge an diesem Objekt in den Überwachungsvorgang eintreten, der alle Attribute vollständig vertreten kann, was zu einer erheblichen Leistungsverbesserung und besseren Code führt.

Proxy kann als Einrichtung einer „Abfangschicht“ vor dem Zielobjekt verstanden werden. Der externe Zugriff auf das Objekt muss zunächst diese Abfangschicht durchlaufen. Daher wird ein Mechanismus zum Filtern und Umschreiben des externen Zugriffs bereitgestellt.
c. Reaktiv ist faul

Wenn Sie in Vue.js 2.x für ein Objekt mit tiefer Eigenschaftsverschachtelung dessen interne tiefe Änderungen kapern möchten, müssen Sie das Objekt rekursiv durchlaufen und Object.defineProperty ausführen, um jede Schicht von Objektdaten reaktionsfähig zu machen, was zweifellos der Fall sein wird verbrauchen viel Leistung.
In Vue.js 3.0 kann die Proxy-API die tiefgreifenden Eigenschaftsänderungen innerhalb des Objekts nicht überwachen, daher besteht ihre Verarbeitungsmethode darin, im Getter rekursiv zu reagieren. Der Vorteil davon besteht darin, dass die internen Eigenschaften, auf die tatsächlich zugegriffen wird, reaktionsfähig werden Man kann einfach sagen, dass es auf Abruf reagiert und so den Leistungsverbrauch reduziert.

8. Welche Optimierungen hat Vue3.0 kompiliert?

Blockbaum generieren

Die Granularität der Vue.js 2.x-Datenaktualisierung und des Auslösens eines erneuten Renderns liegt auf Komponentenebene, und eine einzelne Komponente muss den gesamten Vnode-Baum der Komponente durchlaufen.
In 2.0 korreliert die Geschwindigkeit der Rendering-Effizienz positiv mit der Größe der Komponente: Je größer die Komponente, desto langsamer die Rendering-Effizienz. Darüber hinaus sind diese Durchläufe für einige statische Knoten ohne Datenaktualisierung eine Leistungsverschwendung.
Vue.js 3.0 hat die Analyse der statischen Vorlage während der Kompilierungsphase erreicht und die Kompilierung generiert einen Blockbaum.
Der Blockbaum ist ein verschachtelter Block, der Vorlagen basierend auf dynamischen Knotenanweisungen unterteilt. Die Knotenstruktur innerhalb jedes Blocks ist festgelegt und jeder Block muss nur die darin enthaltenen dynamischen Knoten verfolgen.
Daher korreliert in 3.0 die Rendering-Effizienz nicht mehr positiv mit der Größe der Vorlage, sondern positiv mit der Anzahl der dynamischen Knoten in der Vorlage.

Optimierung der Slot-Kompilierung

Wenn in Vue.js 2.x eine Komponente an einen Slot übergeben wird, wird jedes Mal, wenn die übergeordnete Komponente aktualisiert wird, eine Aktualisierung der untergeordneten Komponente erzwungen, was zu einer Leistungsverschwendung führt.
Vue.js 3.0 optimiert die Generierung von Slots, sodass die Aktualisierung von Attributen in nicht dynamischen Slots nur die Aktualisierung von Unterkomponenten auslöst.
Dynamischer Slot bezieht sich auf die Verwendung von v-if, v-for, dynamischem Slot-Namen usw. im Slot, was dazu führt, dass sich der Slot zur Laufzeit dynamisch ändert, aber nicht von Unterkomponenten verfolgt werden kann.

Optimierung des Diff-Algorithmus

9. Welche Hook-Funktionen werden ausgelöst, wenn VUE2 die Seite zum ersten Mal lädt?

Wenn die Seite zum ersten Mal geladen wird, werden die Hook-
Funktionen beforeCreate, erstellt, beforeMount, gemountet ausgelöst

10. Vorteile von Vue3

bessere Leistung

kleinere Größe

Bessere TS-Unterstützung

bessere Code-Organisation

bessere Logikextraktion

Weitere neue Funktionen

11. Was sind die neuen Funktionen von Vue3?

1. Leistungsverbesserung

Reaktionsschnelle Leistungsverbesserung, vom ursprünglichen Object.defineProperty zum ES6-basierten Proxy, wodurch es schneller wird und Warnungen eliminiert werden.

Vdom wurde neu geschrieben, um den Leistungsengpass von Vdom zu überwinden.

Führen Sie eine Optimierung der Vorlagenkompilierung durch.

Effizientere Komponenteninitialisierung.

2. Bessere Unterstützung für TypeScript

Mit besserer Typinferenz unterstützt Vue3 TypeScript sehr gut.

3. Fügen Sie die Kompositions-API hinzu

Die Composition API ist eine neue Funktion von vue3, die leistungsfähiger ist als Mixin. Es kann jedes Funktionsmodul trennen, die Wiederverwendbarkeit der Codelogik verbessern und den Code komprimierbarer machen.

4. Neue Komponenten

Fragment beschränkt die Vorlage nicht mehr nur auf einen Stammpunkt.

Mit Teleport Portal können wir den Inhalt unserer Kontrolle auf jedes DOM übertragen.

Supense rendert einige zusätzliche Inhalte, während es auf asynchrone Komponenten wartet, um der App ein besseres Benutzererlebnis zu bieten.

5. Tree-Shaking: Unterstützt die Tree-Shaking-Optimierung

Nach der Tree-Shaking-Optimierung werden unnötige Module beschnitten und die wirklich benötigten Module in das Paket gepackt. Das optimierte Projekt ist halb so groß wie das Original und wird schneller geladen.

6. Benutzerdefinierte Renderer-API: Benutzerdefinierter Renderer

Führen Sie die WebGL-Programmierung so aus, wie das DOM implementiert ist.

12. Gibt es Änderungen an der Hook-Funktion für den kombinierten API-Lebenszyklus von vue3?

Setup arbeitet rund um die Hooks beforeCreate undcreatedlifecycle, es besteht also keine Notwendigkeit, diese explizit zu definieren. Andere Haken können im Setup programmiert werden.

Es ist erwähnenswert, dass die Hook-Funktionen in der kombinierten API durch Hinzufügen von „on“ vor dem Lebenszyklus-Hook für den Zugriff auf den Lebenszyklus-Hook der Komponente registriert werden müssen und nur während des Setups synchron verwendet werden können, weil Sie verlassen sich auf den internen globalen Status, um die aktuelle Komponenteninstanz zu finden.

13. Was ist die Options-API?

In vue2 definieren wir Attribute und Methoden wie Daten, Methoden, Requisiten, werden in einer Vue-Datei gemountet und berechnet, um gemeinsam die Seitenlogik zu verarbeiten. Diese Methode wird als Options-API bezeichnet.

Bei auf diese Weise entwickelten komplexen Komponenten muss dieselbe Funktion häufig Eigenschaften und Methoden in verschiedenen Vue-Konfigurationselementen definieren, und der Code ist relativ verstreut. Wenn die Funktion komplizierter ist, ist es bei der Codepflege oft schwierig, die jeder Methode entsprechende Funktion zu unterscheiden, was die Kosten für die Codepflege erhöht. Deshalb hat vue3 die Options-API aufgegeben und durch die Composition-API ersetzt.

14. Was ist die Kompositions-API?

Die Kompositions-API ist neu in vue3, daher verfügt vue2 nicht über sie. In der Kompositions-API ist sie nach der Logikfunktion des Codes organisiert. Alle durch eine Funktion definierten APIs werden zusammengestellt, sodass auch bei komplexer Funktion und zunehmender Codemenge der gesamte Code einer bestimmten Funktion erhalten bleibt Die Funktion kann sofort lokalisiert werden und die Codewartung ist bequem. Sein größtes Merkmal ist: hohe Kohäsion, geringe Kopplung.

15. Was ist der Unterschied zwischen der Composition API und der Options API?

Vue3 unterstützt weiterhin die Options-API, wir empfehlen jedoch die Verwendung der Composition-API. Vor- und Nachteile Vergleich:

Bessere Programmierbarkeit.

Bessere Codeorganisation.

Bessere Fähigkeit zur logischen Abstraktion.

Es ist benutzerfreundlich gegenüber Tree-Shaking und der Code lässt sich leichter komprimieren.

Nein das

16. Was ist der Unterschied zwischen watch und watchEffect?

Sowohl watch als auch watchEffect sind Listener, und watchEffect ist eine Nebeneffektfunktion. Die Unterschiede zwischen ihnen sind:

watch muss die Datenquelle der Überwachung übergeben, und watchEffect kann die mobile Datenquelle automatisch als Abhängigkeit verwenden.

watch kann auf den Wert vor und nach der Änderung zugreifen, watchEffect kann den Wert erst nach der Änderung abrufen.

Wenn die Uhr ausgeführt wird, wird sie nicht sofort ausgeführt, sondern erst, nachdem sich der Wert geändert hat, während watchEffect sofort nach dem Ausführen ausgeführt werden kann. Dies kann über das Konfigurationselement direkt an der Uhr geändert werden.

17. Wie wird die bidirektionale Datenbindung in Vue2 implementiert?

Antwort: Die bidirektionale Datenbindung von Vue wird durch Daten-Hijacking in Kombination mit dem Veröffentlichungs- und Abonnementmodus realisiert, dh Daten und Ansichten werden synchronisiert, Datenänderungen, Ansichtsänderungen, Ansichtsänderungen, Daten ändern sich ebenfalls; Kern: Über VUE
Two Bei der Datenbindung handelt es sich im Kern um die Methode Object.defineProperty() und die Get-Set-Methode.
Einfach ausgedrückt wird diese Methode verwendet, um einen Wert zu definieren. Beim Aufruf verwenden wir darin die get-Methode, und wenn wir dieser Eigenschaft einen Wert zuweisen, verwenden wir darin die set-Methode.

18. Der Lebenszyklus von vue2

Eine Vue-Instanz hat einen vollständigen Lebenszyklus, d. h. 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. Laienhaft ausgedrückt ist es der Prozess der Vue-Instanz von der Schöpfung bis zur Zerstörung, der den Lebenszyklus darstellt.
beforeCreate: Das Mount-Element el und die Daten des vue-Elements sind beide undefiniert und noch nicht initialisiert;
erstellt: Die Datenobjektdaten der vue-Instanz sind verfügbar, el jedoch noch nicht;
beforeMount: das $el und die Daten der vue-Instanz werden initialisiert, stehen aber noch aus. Auf den vorherigen virtuellen Dom-Knoten geladen, data.message wurde nicht ersetzt;
gemountet: Die Vue-Instanz ist gemountet und data.message wurde erfolgreich gerendert.
Vor und nach der Aktualisierung: Die Methoden „beforeUpdate“ und „update“ werden ausgelöst, wenn sich Daten ändern.
Vor und nach der Zerstörung: „beforeDestory“ und „zerstört“. Nach der Ausführung der zerstörten Methode löst die Änderung der Daten keine periodische Funktion aus, was darauf hinweist, dass die Vue-Instanz freigegeben wurde Ereignisüberwachung und Dom-Bindung, aber die Dom-Struktur existiert noch;

19. Die Rolle des vue2-Lebenszyklus:

In seinem Lebenszyklus gibt es mehrere Ereignis-Hooks, was es uns erleichtert, bei der Steuerung des Prozesses der gesamten Vue-Instanz eine gute Logik zu entwickeln.
Einige Verwendungsmethoden von Lebenszyklus-Hooks:
beforeCreate: Ladeereignis, das beim Laden der Instanz ausgelöst wird.
erstellt: Ereignis „Initialisierung abgeschlossen“, asynchrone Anfrage.
Mounted: Mounten Sie das Element, aktualisieren Sie den Dom-Knoten
: Verarbeiten Sie die Daten einheitlich.
BeforeDestory: Bestätigen Sie, dass das Ereignis stoppt.
nextTick: Betreiben Sie den Dom sofort nach der Aktualisierung der Daten.

20. Wie aktualisiere ich vue2 auf vue3?

Wenn Sie das vorherige vue2-Projekt auf vue3 aktualisieren, deinstallieren Sie zunächst die alte Version von vue-cli und installieren Sie die neueste Version. Überprüfen Sie nach Abschluss der Installation die Version von vue. Dann müssen Sie auf die Änderungen oder veralteten Funktionen von vue3 im Projekt achten, die geändert werden müssen. wie:

$children wird von vue3 entfernt und $ref muss durch $children ersetzt werden.

Filter wurden entfernt und in „berechnet“ geändert.

$destory wurde entfernt und muss gelöscht werden.

Neue Änderungen an Slots.

Vuex-Nutzung geändert.

Änderungen der Vue-Router-Nutzung und mehr.

21.Welche Priorität ist zwischen v-if und v-for höher?

In vue2 ist die Priorität von v-for höher, aber in vue3 hat sich die Priorität geändert. v-if hat höhere Priorität.

Wenn v-for und v-if gleichzeitig in vue2 erscheinen, können sie in ein Tag eingefügt werden. Wenn Sie
in vue3 auf diese Weise schreiben, wird ein Fehler verursacht, da v-if eine höhere Priorität hat, und es wird ein Fehler verursacht, wenn Es wird zum Rendern in ein Tag geschrieben

22. Was ist ein Skript-Setup?

scrtpt setup ist ein grammatikalischer Zucker von vue3, der das Schreiben kombinierter APIs vereinfacht und eine bessere Laufleistung bietet. Funktionen von syntaktischem Zucker mithilfe der Skripteinrichtung:

Eigenschaften und Methoden müssen nicht zurückgegeben werden und können direkt verwendet werden.

Wenn eine Komponente eingeführt wird, wird sie automatisch registriert, ohne dass eine manuelle Registrierung über Komponenten erforderlich ist.

Verwenden Sie defineProps, um den von der übergeordneten Komponente übergebenen Wert zu empfangen.

Verwenden Sie Attrs, um Attribute abzurufen, verwenden SieSlots, um Slots abzurufen, und defineEmits, um benutzerdefinierte Ereignisse abzurufen.

Standardmäßig werden keine Attribute der Außenwelt ausgesetzt, und bei Bedarf kann defineExpose verwendet werden.

23. Was sind die gemeinsamen APIs von vue3?

Vue3 unterstützt Tree-Shaking von Webpack5, daher müssen jetzt alle APIs vor der Verwendung importiert werden:

Ref:

Häufig verwendet: ref(), isRef(), unRef(), toRef(), toRefs(), flachRef()

Hinweis: toRef(), toRefs() werden verwendet, wenn Sie möchten, dass die Daten bei der Dekonstruierung weiterhin reagieren

reaktiv:

Häufig verwendet: reactive(), isReactive(), flatReactive(), isProxy(), toRaw()
readonly: schreibgeschützt, kann nicht geändert werden
berechnet:

//写法1：接受一个getter函数，并根据getter的返回值返回一个不可变的响应式ref对象
const a = computed(()=>{})
//写法2：接受一个具有get、set函数的对象，用来创建可写的ref对象
const b = computed({
 get: () =>{},
 set: (newValue) => {},
})

betrachten:

const obj = reactive( {a:{b:1}} )
const e = ref('e')
const f = ref('f')
watch( obj, (newValue,oldValue) => {})
watch( ()=>obj.a.b, (newValue,oldValue) => {}) //监听对象里的某个属性，必须用getter返回，即必须写成()=>obj.a.b的形式（直接写成obj.a.b会报错）
watch( ()=>_.cloneDeep(obj), (newValue,oldValue) => {}) //深拷贝过后,监听的newValue,oldValue才会是前后值不一样,否则newValue,oldValue打印值一样
watch( [e,f], (newValue,oldValue) => {})//vue3新增的写法，可同时监听多个ref数据，写成数组形式
const stop = watch(obj,()=>{}) 
stop()  //停止监听

watchEffect: Führen Sie eine übergebene Funktion sofort aus und verfolgen Sie gleichzeitig ihre Abhängigkeiten. Führen Sie die Funktion erneut aus, wenn sich ihre Abhängigkeiten ändern (die in watchEffect geschriebenen Daten werden als ihre Abhängigkeiten erfasst, und watchEffect wird nur ausgelöst, wenn sich diese Abhängigkeiten ändern).

const stop = watchEffect(() =>{},{flush:'post'})   //对写在回调函数里的所有数据监听
stop()  //停止监听

24. Was ist Teleport in Vue3? Was tut es?

Teleport in Vue3 ist eine neue Anweisung, um zu steuern, wo gerendert werden soll. Es verschiebt den Inhalt einer Komponente im DOM, ohne das übergeordnete Element der Komponente zu ändern.

25. Was ist Spannung in Vue3? Was tut es?

Suspense in Vue3 ist eine neue Komponente in Vue3, die zur Implementierung von Lazy Loading und Fehlerbehandlung verwendet wird. Durch das Hinzufügen von Suspense zur Komponente kann die asynchrone Komponente den Ladezustand wiedergeben. Wenn beim Laden der asynchronen Komponente Fehler auftreten, kann sie diese Fehler auch behandeln.

26. Was ist ein responsives System? Was ist neu am reaktiven System in Vue3?

Ein reaktives System ermöglicht die Aktualisierung von Ansichten, wenn sich der Status ändert. Zu den reaktionsfähigen Systemaktualisierungen in Vue3 gehören Proxy, Reflect, WeakMap usw.

27. Was ist die Vue3 Composition API? Was tut es?

Die Vue3 Composition API ist eine neue Funktion in Vue3. Ihre Funktion besteht darin, die Logik in der Komponente in wiederverwendbare zusammensetzbare Funktionen zu zerlegen. Durch die Verwendung der Composition API können Sie Ihren Code besser organisieren und den Status verwalten.

28.3. Vue3-Lebenszyklus

1. Lebenszyklus der Options-API

2. Lebenszyklus der Kompositions-API

29. So zeigen Sie die Kompositions-API und die Options-API an

1. Kompositions-API Bessere Codeorganisation, bessere Wiederverwendung der Logik, besserer Typ-Push
2. Kleine Projekte, einfache Geschäftslogik, Verwendung der Options-API
3. Für mittlere und große Projekte mit komplexer Geschäftslogik verwenden Sie die Composition API
4. Die Composition API wurde entwickelt, um komplexe Geschäftslogik zu lösen
5. Ähnlich wie React Hooks

30. Erklären Sie ref toRef und toRefs?

1. ref
   1. Generieren reaktiver Daten von Werttypen
   2. Kann für Vorlagen und reaktiv verwendet werden
   3. Ändern Sie den Wert um .value
2. toRef
   1. Eine Requisite für ein reaktives Objekt (reaktiver Wrapper)
   2. Erstellen Sie einen Ref mit Responsive
   3. Beide pflegen eine Referenzbeziehung
3. toRefs, um alle Statusexporte in der Vorlage zu vermeiden
   1. Konvertieren Sie reaktionsfähige Objekte (reaktive Kapselung) in gewöhnliche Objekte
   2. Jede Requisite des Objekts ist die entsprechende Referenz
   3. Beide pflegen eine Referenzbeziehung
4. Beste Art zu verwenden
   1. Verwenden Sie reaktiv, um auf Objekte zu reagieren, und verwenden Sie ref, um auf Werttypen zu reagieren
   2. Kehren Sie im Setup zu toRefs(state) oder toRef(state, 'prop') zurück
   3. Die Variablen von ref werden mit xxxRef benannt
   4. Wenn die zusammengesetzte Funktion ein reaktionsfähiges Objekt zurückgibt, verwenden Sie toRefs

31. Warum müssen Sie „Ref toRefs“ verwenden?

1. 初衷：不丢失响应式的情况下，把对象数据进行分解和扩散
2. 前提：针对的事响应式对象，不是普通对象
3. 注意：不创造响应式，而是延续响应式

32. Wie erhalte ich eine Komponenteninstanz im Setup?

1. Dies ist im Setup und in anderen Kompositions-APIs nicht der Fall
2. Sie können dies weiterhin in der Options-API verwenden
3. In der Composition-API können Sie zum Abrufen die Methode getCurrentInstance verwenden

33.Vergleich zwischen Composition API und React Hooks

1. Das erstere Setup (Lebenszykluserstellung) wird nur einmal aufgerufen, während die letztere Funktion mehrmals aufgerufen wird
2. Ersteres benötigt weder useMemo noch useCallback, da Setup nur einmal aufgerufen wird
3. Ersteres muss die Aufrufreihenfolge nicht berücksichtigen, während letzteres sicherstellen muss, dass die Reihenfolge der Hooks konsistent ist

34. Was sind die Ereignismodifikatoren in Vue3?

Die Ereignismodifikatoren in Vue3 sind grundsätzlich dieselben wie in Vue2, einschließlich Stopp, Verhindern, Erfassen und Selbst.

35. Wie implementiert man dynamische Komponenten in Vue3?

Vue3 verwendet Elemente und das Attribut v-bind:is, um dynamische Komponenten zu implementieren. Zum Beispiel, .

36. Der Unterschied zwischen Object.defineProperty und Proxy

Der Unterschied zwischen Object.defineProperty und Proxy ist wie folgt:

1. Proxy kann Objekte anstelle von Eigenschaften direkt überwachen;
2. Proxy kann Änderungen in Arrays direkt überwachen;
3. Proxy verfügt über bis zu 13 Abfangmethoden, die nicht auf „Apply“, „OwnKeys“, „DeleteProperty“, „Hats“ usw. beschränkt sind. Object.defineProperty verfügt nicht über diese
4. Proxy gibt ein neues Objekt zurück, wir können das neue Objekt nur bedienen, um das Ziel zu erreichen, und Object.defineProperty kann nur die Objekteigenschaften durchlaufen und direkt ändern

37. Was sind die Anweisungen in Vue3?

Zu den Anweisungen in Vue3 gehören v-if, v-for, v-bind, v-on, v-html, v-model, v-show, v-slot, v-text usw.

38. Warum muss vue3 markRaw für importierte Komponenten verwenden?

In vue2 wird nach Komponentenname gewechselt, und in vue3 wird das Setup nach Komponenteninstanz umgeschaltet. Fügen Sie die Komponenteninstanz direkt in den reaktiven Agenten ein und Vue gibt eine Warnung aus. Teilen Sie uns mit, dass wir den Proxy-Proxy durch „shallowRef“ oder „markRaw“ überspringen können. Reaktives Proxying von Komponenteninstanzen ist sinnlos und eine Leistungsverschwendung

markRaw: Markiert ein Objekt, sodass es kein responsives Objekt sein kann.
toRaw: Konvertiert ein responsives Objekt (responsiv definiert durch reaktiv) in ein normales Objekt.
flacheRef: Verarbeitet nur die Antwort grundlegender Datentypen, nicht die Antwort von Objekten.
flatReactive: Behandelt nur die Antwort (flache Antwort) der äußersten Eigenschaften des Objekts.

<template>
	<component :is="currentComponent"></component>
</template>

<script setup>
import A from '../components/A.vue'
import B from '../components/B.vue'
let tabList = reactive([
	{name:'组件A',com:markRaw(A)},
	{name:'组件B',com:markRaw(B)},
]);

39. Wie führt Vue3 die Zustandsverwaltung durch?

Vuex wird für die Statusverwaltung in Vue3 verwendet. Vuex muss zuerst installiert werden und Vuex sollte mit der app.use()-Methode in der Root-Vue-Instanz registriert werden. Verwenden Sie dann die Store-Option in der Komponente, um den Vuex-Status zu erstellen und darauf zuzugreifen.

40. Warum verwendet VUE3 eine kombinierte API?

Da vue2 Einschränkungen hat:

Die logische Erweiterung von Komponenten führt zu einer schlechten Lesbarkeit der Komponenten;

Unfähigkeit, Code komponentenübergreifend wiederzuverwenden;

vue2 bietet begrenzte Unterstützung für TS

41. Was sind die Vorteile der Kompositions-API?

Die Kompositions-API organisiert Code basierend auf logischen Abhängigkeiten und verbessert so die Lesbarkeit und Wartbarkeit

Weniger Code, bessere Wiederverwendung von Logikcode

Es wird keine neue Syntax eingeführt, sondern nur einfache Funktionen

außergewöhnlich flexibel

Die Syntax-Eingabeaufforderung des Tools ist benutzerfreundlich, da es sich um eine einfache Funktion handelt und die Syntax-Eingabeaufforderung und die automatische Kompensation leicht zu realisieren sind

Bessere Typescript-Unterstützung

In der komplexen Funktionskomponente kann der Code nach Merkmalen organisiert werden und weist einen starken Zusammenhalt auf

Wiederverwendung von Code zwischen Komponenten

42. Erklären Sie den Aufbau in Vue 3

Die Setup-Funktion empfängt zwei Parameter, Requisiten und Kontext.

1. Requisiten: Der Wert ist ein Objekt, einschließlich: von außerhalb der Komponente übergeben. Die empfangenen Eigenschaften werden innerhalb der Komponente deklariert. Es ist zu beachten, dass Requisiten in Vue3 schreibgeschützt sind, d. h. der Wert von Requisiten kann in der Setup-Funktion nicht geändert werden. Wenn Sie die übergebenen Daten ändern müssen, können Sie ein reaktives Objekt oder eine Referenz verwenden.

2. Kontext: Kontextobjekt.

attrs: Der Wert ist ein Objekt, einschließlich Attributen, die von außerhalb der Komponente übergeben, aber nicht in der Requisitenkonfiguration deklariert werden. Entspricht diesem.$attrs

slots: Empfangener Slot-Inhalt, äquivalent zu this.$slots

emit: Eine Funktion, die benutzerdefinierte Ereignisse verteilt, äquivalent zu this.$emit

43. bereitstellen und injizieren

1. Provide und inject sind zwei neue APIs zum Bereitstellen von Daten in der übergeordneten Komponente und zum anschließenden Einfügen von Daten in die untergeordnete Komponente.

2. Provide: ist ein Objekt oder eine Funktion, die ein Objekt zurückgibt. Es enthält Dinge, die künftigen Generationen gegeben werden sollen, also Attribute und Attributwerte.

3. inject: ein Array von Strings oder ein Objekt. Der Attributwert kann ein Objekt sein, das from- und default-Standardwerte enthält.

//在父组件中，使用provide提供数据：
//name：定义提供 property的 name。
//value ：property的值。
 setup(){
    provide('info',"值")
  }
​
//在子组件中，使用inject注入数据
//name：接收 provide提供的属性名。
//default：设置默认值，可以不写，是可选参数。
setup(){
    const info = inject("info")
    inject('info',"设置默认值")
    return {
        info
    }
  }
​
//需要注意的是，provide和inject只能在setup函数中使用，而且provide提供的数据只能在其子组件中使用。如果要在兄弟组件中共享数据，可以使用一个共享的对象或者使用Vuex等状态管理库。

44.shallowReactive ist flachRef

1. flachRef: Responsiver Typ, der nur grundlegende Datentypen verarbeitet

2. flachReaktiv: Responsiv (flach reagierend), das sich nur mit den äußersten Eigenschaften des Objekts befasst

3. Responsive Datenverarbeitung mit flachen Funktionen: Es werden nur die Daten des Objekts der ersten Ebene verarbeitet, und die weiter unten verschachtelten Daten sind wirkungslos

4. flachReative und flachRef können die Leistung in einigen speziellen Anwendungsszenarien verbessern. Ersteres richtet sich an Objekte und wird für die Verarbeitung flacher Antwortdaten verwendet, während letzteres nur die Antwort grundlegender Datentypen verarbeitet und keine Objektverarbeitung durchführt. Reaktionsverarbeitung.

45.readonly und strictReadonly

Sowohl „readonly“ als auch „shallowReadonly“ ermöglichen, dass reaktionsfähige Daten nur die Fähigkeit zum Lesen haben. Letzteres ist „shallow read-only“, das heißt, es funktioniert nur auf der ersten Ebene von Datenobjekten, und bei tiefer Verschachtelung wird bei der Verarbeitung mit „shallowReadonl()“ die Tiefe verwendet Die Datenunterstützung wurde geändert

1. schreibgeschützt: Machen Sie reaktionsfähige Daten schreibgeschützt (tief schreibgeschützt), machen Sie reaktionsfähige Daten schreibgeschützt, empfangen Sie reaktionsfähige Daten, verarbeiten Sie sie schreibgeschützt, dann lassen die neu zugewiesenen Daten keine Änderung zu

2. Akzeptieren Sie ein Objekt (ob responsiv oder normal) oder eine Referenz und geben Sie einen schreibgeschützten Proxy des ursprünglichen Werts zurück

3. ShallowReadonly: Machen Sie reaktionsfähige Daten schreibgeschützt (shallow readonly), empfangen Sie reaktionsfähige Daten, werden Sie nach der Shallowreadonly-Verarbeitung schreibgeschützt, berücksichtigen Sie nur die Daten der ersten Ebene des Objekts und können nicht geändert werden Tiefe Daten in der ersten Verschachtelungsebene unterstützen die Änderung

4. Lassen Sie die Antwortdaten schreibgeschützt werden (shallow read-only).

46. ​​​​Vater an Sohn in vue3, Sohn an Vater

1. Vom Vater zum Sohn:

1. Übergeben Sie das Unterkomponenten-Tag der übergeordneten Komponente: Der an die Unterkomponente übergebene Datenname = „zu übergebende Daten“

2. Über Requisiten in der Unterkomponente empfangen und in der Vorlage verwenden

2, Kind und Vater:

1. Die Unterkomponente löst das Ereignis über den zweiten Parameter der Setup-Funktion, context.emit, aus, um die Übertragung vom untergeordneten zum übergeordneten Element zu realisieren

47. Was ist der Unterschied zwischen ref und reaktiv?

1. Einfach ausgedrückt wird Ref normalerweise zum Definieren von 基本类型Daten und Reactive zum Definieren von 对象（或者数组）Typdaten verwendet

Hinweis: ref kann auch zum Definieren von Daten vom Typ Objekt (oder Array) verwendet werden, die durch interne Reaktivität automatisch in ein Proxy-Objekt konvertiert werden.

2. In Bezug auf die Verwendung: ref arbeitet mit Datenwerten 需要.value, was in Vorlagenvorlagen nicht erforderlich ist.

reaktiv 不需要.valuenimmt den Wert
3 an. In Bezug auf die Datenübertragung:

Die Destrukturierung der Zuweisung führt dazu, dass die Reaktionsfähigkeit von Reactive verloren geht, {ref(1), ref(2)} jedoch nicht

4. Hauptwinkel:

ref implementiert die Reaktionsfähigkeit (Datenentführung) durch das Abrufen und Festlegen von Object.defineProperty().

Reactive implementiert die Reaktionsfähigkeit (Datenentführung) mithilfe von Proxy und manipuliert die Daten innerhalb des Quellobjekts mithilfe von Reflect.

48. Beurteilung der auf Vue3 reagierenden Daten?

isRef: prüft, ob ein Wert ein Ref-Objekt ist

isReactive: prüft, ob ein Objekt ein von reactive erstellter reaktiver Proxy ist

isReadonly: prüft, ob ein Objekt ein schreibgeschützter Proxy ist, der von readonly erstellt wurde

isProxy: prüft, ob ein Objekt ein Proxy ist, der durch eine reaktive oder schreibgeschützte Methode erstellt wurde

49. Wie man toRef versteht

Funktion: Erstellen Sie ein Referenzobjekt, dessen Wert auf ein Attribut in einem anderen Objekt verweist.

Syntax: const name = toRef(person,'name')

Anwendung: Wenn Sie eine Eigenschaft im reaktionsfähigen Objekt ausschließlich zur externen Verwendung bereitstellen möchten.

Erweiterung: toRefs hat die gleiche Funktion wie toRef, es können jedoch mehrere Ref-Objekte in Stapeln erstellt werden, Syntax: toRefs(person)

50. Welche neuen Komponenten hat vue3?

1. Fragment
in Vue2: Die Komponente muss ein Root-Tag haben

In Vue3: Komponenten können keine Root-Tags haben und mehrere Tags werden intern in ein virtuelles Fragmentelement eingefügt

Vorteile: Reduzieren Sie die Etikettenebene und reduzieren Sie den Speicherverbrauch

2. Teleport
Was ist Teleport? —— Teleport ist eine Technologie, die unsere Komponenten-HTML-Struktur an einen bestimmten Ort verschieben kann.

<teleport to="移动位置">
    <div v-if="isShow" class="mask">
        <div class="dialog">
            <h3>我是一个弹窗</h3>
            <button @click="isShow = false">关闭弹窗</button>
        </div>
    </div>
</teleport>

3. Suspense
rendert einige zusätzliche Inhalte, während es auf asynchrone Komponenten wartet, damit die Anwendung ein besseres Benutzererlebnis bietet

Schritte zur Verwendung:

Komponenten asynchron importieren

import {defineAsyncComponent} from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))

Verwenden Sie Suspense, um Komponenten zu verpacken und Standard und Fallback zu konfigurieren

<template>
    <div class="app">
        <h3>我是App组件</h3>
        <Suspense>
            <template v-slot:default>
                <Child/>
            </template>
            <template v-slot:fallback>
                <h3>加载中.....</h3>
            </template>
        </Suspense>
    </div>
</template>

51. Zu ergänzen

• Ich werde heute hier schreiben~
• Freunde, (￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ Bis morgen~~
• Seid alle jeden Tag glücklich

Jeder kann gerne darauf hinweisen, wo der Artikel korrigiert werden muss ~ Das
Lernen ist endlos, die Zusammenarbeit ist eine Win-Win-Situation

Begrüßen Sie die kleinen Brüder und Schwestern, die vorbeikommen, um bessere Meinungen zu äußern ~~