37 häufig gestellte Vue-Interviewfragen zur Erweiterung Ihres Vue-Wissensvorrats!

Dieser Artikel fasst 37 häufig gestellte Vue-Interviewfragen zusammen und teilt sie mit Ihnen. Er hilft Ihnen dabei, die Grundlagen zu festigen und Ihren Vue-Wissensvorrat zu erweitern. Merken Sie sich die Fragen einfach auswendig und fertig!

Verwandte Empfehlungen: Zusammenfassung der großen Front-End-Interviewfragen 2022 (Sammlung)

1. Sprechen Sie über Ihr Verständnis von MVVM?

Vereinfachte Zuordnungsbeziehung, versteckter Controller MVVM verbirgt die auf MVC basierende Kontrollschicht.

Vue ist kein MVVM-Framework, sondern ein View-Layer-Framework. [Verwandte Empfehlungen: vue.js Video-Tutorial]

ViewModal ist eine Brücke, die Daten mit Ansichten verknüpft.

2. Sprechen Sie über Ihr Verständnis von responsiven Daten in Vue?

Wenn sich die Werte von Array- und Objekttypen ändern, werden alle Eigenschaften mit getter und über die Methode <code>defineReactive mit Hilfe von defineProperty hinzugefügt Code>Setter. Benutzer können beim Abrufen und Festlegen von Werten einige Vorgänge ausführen. defineReactive方法，借助了defineProperty，将所有的属性添加了getter和setter。用户在取值和设置的时候，可以进行一些操作。

缺陷：只能监控最外层的属性，如果是多层的，就要进行全量递归。

get里面会做依赖搜集（dep[watcher, watcher]） set里面会做数据更新（notify，通知watcher更新）

三、Vue中如何检测数组的变化？

vue中对数组没有进行defineProperty，而是重写了数组的7个方法。 分别是：

• push
• shift
• pop
• splice
• unshift
• sort
• reverse

因为这些方法都会改变数组本身。

数组里的索引和长度是无法被监控的。

四、Vue中如何进行依赖收集的？

Vue初始化的时候，挂载之后会进行编译。生成renderFunction。

当取值的时候，就会搜集watcher，放到dep里面。

当用户更改值的时候，就会通知watcher，去更新视图。

五、如何理解Vue中的模板编译原理？

这个问题的核心是如何将template转换成render函数。

1. 将template模块转换成ast语法书 - parserHTML
2. 对静态语法做标记（某些节点不改变）
3. 重新生成代码 - codeGen,使用with语法包裹字符串

六、Vue生命周期钩子是如何实现的?

Vue的生命周期钩子是回调函数，当创建组件实例的过程中会调用相应的钩子方法。 内部会对钩子进行处理，将钩子函数维护成数组的形式。

七、Vue组件生命周期有哪些？

• beforeCreate 在实例初始化之后，数据观测observer 和event、watcher事件配置之前被调用
• created 实例已经创建完成，在这一步，以下配置被完成
  • 数据观测
  • 属性和方法的运算
  • watch/event时间回调
  • $el尚未生成
• beforeMount 在挂载之前被调用，render尚未被调用
• mounted el被新创建的vm.$el替换，并挂载到实例上去之后调用
• beforeUpdate 数据更新时，被调用，发生在虚拟Dom重新渲染和打补丁之前
• update 由于数据更改导致的虚拟Dom重新渲染和打补丁，在这之后调用
• beforeDestroy 实例销毁之前调用
• destroyed 实例销毁之后调用，调用后Vue实例的所有东西都会被解绑，所有的事件监听会被移除，子实例被销毁，该钩子在服务端渲染期间不被调用
• keep-alive（activated & deactivated）

八、vue.mixin的使用场景和原理?

Vue的mixin的作用就是抽离公共的业务逻辑，原理类似对象的继承，当组件初始化的时候，会调用mergeOptions方法进行合并，采用策略模式针对不同的属性进行合并。 如果混入的数据和本身组件的数据有冲突，采用本身的数据为准。

缺点：命名冲突、数据来源不清晰

九、Vue的组件data为什么必须是一个函数?

new Vue

Defekt: Nur die äußersten Attribute können überwacht werden. Wenn es mehrschichtig ist, ist eine vollständige Rekursion erforderlich.

Get führt die Abhängigkeitssammlung durch (dep[watcher, watcher]) Datenaktualisierungen werden im Set durchgeführt (benachrichtigen, Beobachter über Aktualisierungen informieren)

3 Wie erkennt man Änderungen in Arrays in Vue? 🎜Vue definiert keine Eigenschaften für Arrays, sondern schreibt 7 Methoden von Arrays neu. Sie sind: 🎜

• Push
• Shift
• Pop
• Splice
• Unshift
• sort
• reverse

🎜Weil diese Methoden das Array selbst ändern. 🎜🎜Der Index und die Länge im Array können nicht überwacht werden. 🎜

4. Wie sammle ich Abhängigkeiten in Vue? 🎜🎜🎜🎜Vue Während der Initialisierung wird nach dem Mounten eine Kompilierung durchgeführt. RenderFunction generieren. 🎜🎜Wenn der Wert erreicht ist, wird der Beobachter abgeholt und in die Abteilung gebracht. 🎜🎜Wenn der Benutzer den Wert ändert, wird der Beobachter benachrichtigt, die Ansicht zu aktualisieren. 🎜

5. Wie versteht man das Prinzip der Vorlagenkompilierung in Vue? 🎜🎜Der Kern dieses Problems besteht darin, wie man eine Vorlage in eine Renderfunktion umwandelt. 🎜

1. Konvertieren Sie das Vorlagenmodul in ein Ast-Grammatikbuch – parserHTML
2. Markieren Sie die statische Grammatik (einige Knoten ändern sich nicht)
3. Generieren Sie den Code neu – codeGen, verwenden Sie mit Syntax zum Umschließen von Zeichenfolgen

6. Wie wird der Lebenszyklus-Hook von Vue implementiert? wird erstellt Die entsprechende Hook-Methode wird während der Instanz aufgerufen. Der Hook wird intern verarbeitet und die Hook-Funktion wird in Form eines Arrays verwaltet. 🎜

7. Was sind die Lebenszyklen von Vue-Komponenten? 🎜

• beforeCreate wird aufgerufen, nachdem die Instanz initialisiert wurde, bevor der Datenbeobachtungsbeobachter und das Ereignis und die Watcher-Ereigniskonfiguration erstellt wurden. In diesem Schritt ist die folgende Konfiguration abgeschlossen
  • Datenbeobachtung
  • Betrieb von Eigenschaften und Methoden
  • Rückruf zur Überwachungs-/Ereigniszeit
  • $el wurde noch nicht generiert
• beforeMount wird vor dem Mounten aufgerufen, render wurde noch nicht aufgerufen
• mounted el wird durch das neu erstellte vm.$el ersetzt und nach dem Mounten in die Instanz aufgerufen
• beforeUpdate wird aufgerufen, wenn die Daten aktualisiert werden, und erfolgt, bevor der virtuelle Dom erneut gerendert und gepatcht wird
• update wird aufgerufen, nachdem der virtuelle Dom aufgrund von neu gerendert und gepatcht wird Datenänderungen
• beforeDestroy wird aufgerufen, bevor die Instanz zerstört wird
• destroyed wird aufgerufen, nachdem die Instanz zerstört wird. Nach dem Aufruf wird alles in der Vue-Instanz ungebunden, alle Ereignis-Listener werden es tun entfernt werden und die Unterinstanz wird zerstört. Dieser Hook wird während des Zeitraums nicht aufgerufen
• keep-alive (aktiviert und deaktiviert)

8. Verwendungsszenarien und Prinzipien von Vues Mixin. Das Prinzip ähnelt der Objektvererbung. Die Methode mergeOptions wird zum Zusammenführen aufgerufen und der Strategiemodus wird zum Zusammenführen verschiedener Attribute verwendet. Sollten die gemischten Daten mit den Daten der eigenen Komponente kollidieren, haben die eigenen Daten Vorrang. 🎜🎜Nachteile: Namenskonflikte, unklare Datenquellen🎜

9. Warum müssen die Komponentendaten von Vue eine Funktion sein 🎜🎜new Vue ist eine einzelne Im Beispielmodus gibt es keine Zusammenführungsvorgänge, sodass die Root-Instanz nicht überprüfen muss, ob es sich bei den Daten um eine Funktion handeln muss. Die Daten der Komponente müssen eine Funktion haben, um zu verhindern, dass die Daten der beiden Komponenten kontaminiert werden. Wenn es sich bei allen um Objekte handelt, verweisen sie beim Zusammenführen auf dieselbe Adresse. Und wenn es sich um eine Funktion handelt, werden beim Aufruf während der Zusammenführung zwei Leerzeichen generiert. 🎜🎜10. Bitte erläutern Sie das Prinzip von nextTick. 🎜🎜nextTick ist eine Mikroaufgabe. 🎜

• Der Rückruf in nextTick ist ein verzögerter Rückruf, der nach dem Ende des nächsten Dom-Aktualisierungszyklus ausgeführt wird.
• kann verwendet werden, um den aktualisierten Dom zu erhalten.
• Durch die Verwendung von nextTick kann die benutzerdefinierte Logik sichergestellt werden wird nach dem Update aktualisiert

11. Was ist der Unterschied zwischen berechnet und beobachtet?

• Sowohl die Berechnung als auch die Überwachung werden basierend auf dem Beobachter implementiert.
• berechnete Attribute werden zwischengespeichert und die abhängigen Werte ändern sich nicht. Bei der Übernahme von Werten wird die berechnete Attributmethode nicht wiederholt ausgeführt.
• watch überwacht Änderungen der Werte

12. Wie wird die Vue.set-Methode implementiert?

• vue fügt das dep-Attribut sowohl dem Objekt als auch dem Array selbst hinzu
• Wenn dem Objekt ein nicht vorhandenes Attribut hinzugefügt wird, wird der Watcher, von dem das Objekt abhängt, zur Aktualisierung veranlasst.
• Wenn der Array-Index geändert wird, Das Array selbst heißt Die Spleißmethode zum Aktualisieren des Arrays

13. Warum verwendet Vue virtuelle Doms, um den realen Dom zu beschreiben, der eine Abstraktion des realen Doms ist? Direkter Betrieb von Dom, aber die Betriebseffizienz der js-Ebene ist hoch und es können Dom-Operationen in Objektoperationen umgewandelt werden. Schließlich wird der Unterschied durch den Diff-Algorithmus aktualisiert, um den Dom zu aktualisieren. Der virtuelle Dom hängt nicht von der realen Plattformumgebung ab und kann plattformübergreifend sein. 14 Was ist das Prinzip des Diff-Algorithmus von Vue?

Der Diff-Algorithmus von Vue ist ein flacher Vergleich und berücksichtigt keine Vergleiche zwischen Ebenen. Intern wird zum Vergleich die tiefrekursive Methode + Doppelzeigermethode verwendet
• Vergleichen Sie zunächst, ob die beiden Knoten derselbe Knoten sind Situation des alten Knotens und des Sohnes des neuen Knotens
• Optimierungsvergleich: Kopf-an-Kopf, Schwanz-an-Schwanz, Kopf-an-Schwanz, Schwanz-an-Kopf

Vergleichssuche und Wiederverwendung

15 Warum müssen wir Diff durchführen, um Unterschiede zu erkennen, da Vue Datenänderungen durch Datenentführung genau erkennen kann?

• Reaktive Datenänderungen: Vue kann tatsächlich wissen, wann sich die Daten ändern, und das reaktionsfähige System kann es sofort wissen. Wenn jedoch zu jedem Attribut ein Beobachter hinzugefügt wird, ist die Leistung sehr schlecht.
• Eine zu feine Granularität führt zu ungenauen Updates
• Daher wird der Watcher + Diff-Algorithmus verwendet, um Unterschiede zu erkennen.
• 16. Bitte erläutern Sie die Funktion und das Prinzip des Schlüssels

Im Patch-Prozess von Vue können Sie den Schlüssel verwenden, um festzustellen, ob zwei virtuelle Knoten derselbe Knoten sind.

Kein Schlüssel verursacht Probleme während der Aktualisierung.

• Versuchen Sie, den Index nicht als Schlüssel zu verwenden
Häufig verwendete Komponentisierungstechnologien: Eigenschaften, benutzerdefinierte Ereignisse, Slots
• Aktualisierungsumfang reduzieren, geänderte Komponenten werden durch Werte neu gerendert

Hohe Kohäsion, geringe Kopplung, einseitiger Datenfluss

Achtzehn. Bitte beschreiben Sie den Renderprozess der Komponente

• Virtuellen Knoten der Komponente erstellen-> In die Seite einfügen
• 19 Komponente Der virtuelle Knoten ruft den Prepatch-Hook auf, aktualisiert dann die Eigenschaften und aktualisiert die Komponente.

20. Prinzip der asynchronen Komponenten: Rendern Sie zuerst den asynchronen Platzhalterknoten. Rufen Sie nach dem Laden der Komponente forceUpdate auf, um die Aktualisierung zu erzwingen.

21. Vorteile und Prinzipien von Funktionskomponenten
• Eigenschaften von Funktionskomponenten: zustandslos, kein Lebenszyklus, nein das. Die Leistung wird also etwas höher sein.
• Eine normale Komponente ist eine Klasse, die Vue erbt.
• Funktionskomponente ist eine gewöhnliche Funktion.

22. Welche Möglichkeiten gibt es, Werte in Komponenten zu übergeben? „props“ und „e“

o

1. p Transfer . Die untergeordnete Komponente übergibt Daten über $emit:Eltern$Grupper e
2. nt$t$s rs
3. and $\mathrm{Die\; übergeordnete\; Komponente\; wird\; über\; „prove“\; bereitgestellt\; und\; die\; untergeordnete\; Komponente\; injiziert\; Variablen\; über\; inject.}\mathrm{Die\; Hauptfunktion\; besteht\; darin,\; Daten\; stapelweise\; zu\; übertragen.}\mathrm{provide/inject\; eignet\; sich\; besser\; für\; die\; Anwendung\; in\; Plug-Ins,\; hauptsächlich\; um\; eine\; ebenenübergreifende\; Datenübertragung\; zu\; erreichen.}\mathrm{Vierundzwanzig,\; welches\; hat\; die\; höhere\; Priorität,\; v-for\; oder\; v-if?}\mathrm{Zuallererst\; können\; v-for\; und\; v-if\; nicht\; im\; selben\; Tag\; verwendet\; werden.}\text{Verarbeiten Sie zuerst v-for, dann v-if.}$

   Wenn Sie gleichzeitig auf sie stoßen, sollten Sie erwägen, zuerst berechnete Attribute zu verwenden, um die Daten zu verarbeiten, und dann v-for auszuführen, um die Anzahl der Schleifen zu reduzieren.

   25. Wie wird der V-Modus implementiert?

   Das für Komponenten verwendete V-Modell ist Modell und Rückruf

   

   Die Verwendung des V-Modells für gewöhnliche Elemente generiert Anweisungen und kann auch aufgrund verschiedener Elemente generiert werden:

   • Wert und Eingabe generieren
   • Wann die Änderung und Funk
   • generierte Änderung und geprüfte

   

   Anweisungen aufgerufen werden?

   

   Quellcode:

   

   26. Der Unterschied zwischen dem normalen Slot von Vue und dem Scope-Slot

   Normaler Slot

   Normaler Slot ist die Arbeit des Ersetzens nach dem Rendern. Ersetzen Sie nach dem Rendern der übergeordneten Komponente den Inhalt der untergeordneten Komponente.

   

   Verarbeiten Sie beim Kompilieren der Vorlage die untergeordneten Knoten und Slot-Tags in der Komponente.

   

   Verwenden Sie beim Erstellen des Elements die Methode _t(), um den Inhalt von _v() zu ersetzen.

   

   Scope-Slot

   Der Scope-Slot kann die Eigenschaften in der Unterkomponente abrufen. Übergeben Sie die Eigenschaften in der untergeordneten Komponente und rendern Sie sie.

   

   

   Kompilierungsergebnis des Scope-Slots:

   

   

   28. Was macht Vue.use? Die

   Vue.use是用来使用插件的。我们可以在插件中扩展全局组件、指令、原型方法等。 会调用install-Methode übergibt standardmäßig die Vue-Konstruktionsfunktion. Sie können Vue im Plug-In verwenden, ohne auf die Vue-Bibliothek angewiesen zu sein. 29. Welche Vorteile hat das Schreiben eines Komponentennamens?

   Durch das Hinzufügen des Namensattributs wird die Komponente selbst zum Komponentenattribut hinzugefügt, um einen rekursiven Aufruf der Komponente zu implementieren.

   kann den spezifischen Namen der Komponente darstellen, um das Debuggen und Auffinden der entsprechenden Komponente zu erleichtern.

   • Dreißig, was sind die Modifikatoren von Vue?
   • .stop

   .prevent

   .capture
   • .self
   • .once
   • .passive
   • .right
   • .center
   • .middle
   • .alt
   • 31. Wie man Benutzerdefiniert versteht Anweisungen?
   • Wenn beim Generieren eines Ast-Syntaxbaums eine Anweisung auftritt, wird das Attribut „directives“ zum aktuellen Element hinzugefügt.

   Anweisungscode wird über genDirectives generiert.

   Vor dem Patchen den Hook der Anweisung in cbs extrahieren und aufrufen der entsprechende Hook während des Patch-Prozesses
   • Beim Ausführen des Hooks, der cbs entspricht, wird die entsprechende Anweisungsdefinitionsmethode aufgerufen
   • 32 Wo wird Keep-Alive normalerweise verwendet? Was ist das Prinzip?
   • Wenn Sie Keep-Alive verwenden, um dynamische Komponenten zu verpacken, werden die Komponenten zwischengespeichert, um eine Neuerstellung der Komponenten zu vermeiden
   Es gibt zwei Verwendungsszenarien: eines für dynamische Komponenten und das andere für die Router-Ansicht

   Hier wird eine Whitelist und eine Blacklist erstellt. Gibt an, was zwischengespeichert werden muss und was nicht. Und die maximale Anzahl an Caches.

   

   Zwischengespeichert wird die Instanz der Komponente, die mit Schlüssel- und Wertobjekten gespeichert wird.

   Überwachen Sie beim Laden das Ein- und Ausschließen.

   Wenn kein Caching erforderlich ist, geben Sie den virtuellen Knoten direkt zurück.

   Wenn Sie zwischenspeichern müssen, verwenden Sie die ID und den Tag-Namen der Komponente, um einen Schlüssel zu generieren, verwenden Sie die Instanz des aktuellen Vnode als Wert und speichern Sie ihn als Objekt. Dies ist die Cache-Liste

   Wenn die maximale Anzahl an Caches festgelegt ist, löschen Sie den 0. Cache. Fügen Sie den neuesten Cache hinzu.

   Und fügen Sie der Komponente eine KeepAlive-Variable hinzu, damit sie wahr ist. Wenn die Komponente initialisiert wird, wird sie nicht mehr initialisiert.

   33. Wie viele Hook-Funktionen hat der Vue-Router? Wie läuft der Ausführungsprozess ab?

   Es gibt drei Arten von Hook-Funktionen:

   • Global Guard
   • Route Guard
   • Component Guard

   

   34. Der Unterschied zwischen den beiden Modi von Vuerouter

   • Es gibt drei Modi im Vue-Router , nämlich Hash, History, Abstract
   • Abstract wird verwendet, wenn die Szene der API geändert wird, die den Browser nicht unterstützt. Der Hash-Modus ist gut kompatibel, aber nicht schön und nicht förderlich für SEO. History ist schön, HistoryAPI +popState, aber die Aktualisierung führt zu 404
   • 35. Was sind die Leistungsoptimierungen von Vue?
   Stellen Sie die Datenebene nicht zu tief ein, richten Sie reaktionsfähige Daten angemessen ein
   Wenn Sie Daten verwenden, speichern Sie das Ergebnis des Werts zwischen, und nehmen Sie den Wert nicht häufig an
   • Stellen Sie den Schlüssel angemessen ein
   • v-show (hohe Leistung bei häufigem Wechseln) und v-bei angemessener Verwendung
   • Kontrollieren Sie die Granularität von Komponenten-> Vue verwendet Aktualisierungen auf Komponentenebene
   • Verwenden Sie funktionale Komponenten-> Mit Hilfe der Unterauftragsstrategie von Webpack
   • Verwenden Sie Keep-Alive zum Zwischenspeichern von Komponenten
   • Virtuelles Scrollen, Time Slicing und andere Strategien
   • Verpackungsoptimierung
   • 36. Sprechen Sie über Ihr Verständnis von Vuex?
   • Vuex ist ein globales Zustandsverwaltungssystem, das speziell für Vue bereitgestellt wird und für den Datenaustausch und das Daten-Caching in mehreren Komponenten verwendet wird.
   • Problem: Kann nicht bestehen bleiben.

   Mutation ändert hauptsächlich den Zustand und führt ihn synchron aus.

   Aktion führt Geschäftscode aus, um die Wiederverwendung zu erleichtern, und die Logik kann asynchron sein. Der Status kann nicht direkt geändert werden.

   37. Welche Designmuster werden in Vue verwendet?
   • Einzelfallmodus: mehrmals neu, nur eine Instanz
   • Werksmodus: Sie können eine Instanz erstellen (Erstellung eines virtuellen Knotens), indem Sie Parameter übergeben.

   Veröffentlichungs- und Abonnementmodus: eventBus

   Observer Modus: Beobachten und Dep / 7043074656047202334
   • Autor: Hai Mingyue
   • (Lernvideo-Sharing:
   • Web-Frontend
   )