Über 20 wichtige Vue-Interviewfragen (mit Antwortanalyse)

In diesem Artikel wurden mehr als 20 Vue-Interviewfragen zusammengestellt, die Sie zusammen mit der Analyse der Antworten mit Ihnen teilen können. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

【Empfohlene verwandte Interviewfragen: vue-Interviewfragen(2021)】

Anhand der Dicke der Brillengläser und des gelb-schwarz karierten Hemdes fiel mir auf, dass der Interviewer vor mir sitzen sollte Derjenige, der kommt, ist nicht gut.

Wie üblich werde ich 3 Minuten damit verbringen, mich vorzustellen. Um Peinlichkeiten zu vermeiden, starrte ich während dieser Zeit zwischen die Augenbrauen des Interviewers, aber der Interviewer war offensichtlich nicht sehr an meiner Erfahrung interessiert. Er unterbrach mich nach anderthalb Minuten.

Welchen Technologie-Stack beherrschen Sie Ihrer Meinung nach am besten?

Vue, ich mag Youda sehr, der erste Dokumentarfilm von Vue ist erst kürzlich erschienen, er ist wirklich gut anzusehen.

0. Können Sie über MVVM sprechen?

---

MVVM ist die Abkürzung für Model-View-ViewModel, was die Weiterentwicklung von Controller in MVC zu ViewModel. Die Modellebene stellt das Datenmodell dar, die Ansicht stellt die UI-Komponente dar und das ViewModel ist die Brücke zwischen der Ansichts- und der Modellebene. Die Daten werden an die ViewModel-Ebene gebunden und rendern die Daten automatisch in die Seite , wird die viewModel-Ebene benachrichtigt, die Daten zu aktualisieren. (Teilen von Lernvideos: <a href="https://www.php.cn/course/list/18.html" target="_blank">vue-Video-Tutorial<code>Model-View-ViewModel缩写，也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型，View代表UI组件，ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据。（学习视频分享：vue视频教程）

1.简单说一下Vue2.x响应式数据原理

---

Vue在初始化数据时，会使用Object.defineProperty重新定义data中的所有属性，当页面使用对应属性时，首先会进行依赖收集(收集当前组件的watcher)如果属性发生变化会通知相关依赖进行更新操作(发布订阅)。

2.那你知道Vue3.x响应式数据原理吗？

---

(还好我有看，这个难不倒我)

Vue3.x改用Proxy替代Object.defineProperty。因为Proxy可以直接监听对象和数组的变化，并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。

Proxy只会代理对象的第一层，那么Vue3又是怎样处理这个问题的呢？

（很简单啊）

判断当前Reflect.get的返回值是否为Object，如果是则再通过reactive)

1. Sprechen Sie kurz über Vue2.x Responsive-Daten-Prinzip

Wenn Vue Daten initialisiert, verwendet es Object.defineProperty, um alle Eigenschaften in den Daten neu zu definieren. Wenn die Seite die entsprechenden Eigenschaften verwendet, führt sie zunächst eine Abhängigkeitssammlung durch (erfasst die aktuelle Komponente watcher) benachrichtigt relevante Abhängigkeiten, um Aktualisierungsvorgänge (publish und subscribe) durchzuführen, wenn sich die Eigenschaften ändern.

2. Kennen Sie das Prinzip der responsiven Daten von Vue3.x?

---

(Zum Glück habe ich es gesehen, das ist für mich kein Problem)

Vue3.x verwendet Proxy anstelle von Object.defineProperty. Denn Proxy kann Änderungen in Objekten und Arrays direkt überwachen und verfügt über bis zu 13 Abfangmethoden. Und als neuer Standard wird er einer kontinuierlichen Leistungsoptimierung durch Browserhersteller unterliegen.

Proxy fungiert nur als Proxy für die erste Ebene des Objekts. Wie geht Vue3 mit diesem Problem um?

(Sehr einfach)

Bestimmen Sie, ob der aktuelle Rückgabewert von Reflect.get Object ist. Wenn ja, verwenden Sie die Methode reactive als Proxy. Auf diese Weise wird eine detaillierte Beobachtung erreicht .

Beim Überwachen eines Arrays kann Get/Set mehrmals ausgelöst werden. Wie kann man also verhindern, dass es mehrmals ausgelöst wird?

Wir können feststellen, ob der Schlüssel das Attribut des aktuellen Proxy-Objektziels selbst ist oder ob der alte Wert und der neue Wert gleich sind. Nur wenn eine der beiden oben genannten Bedingungen erfüllt ist, kann der Trigger ausgeführt werden. Der Interviewer hob den Kopf. Ich dachte mir

---

(Dieser Typ ist in Ordnung, besser als die beiden vorherigen, er hätte mehr oder weniger den Quellcode von Vue3 lesen sollen)

3 Lassen Sie uns darüber sprechen, wie man Array-Änderungen in vue2.x überwacht

• Bei der Entführung von Funktionen wird die Array-Methode neu geschrieben. Vue schreibt die Prototypkette des Arrays in Daten um und verweist auf die von ihm definierte Array-Prototypmethode. Auf diese Weise können Abhängigkeitsaktualisierungen benachrichtigt werden, wenn die Array-API aufgerufen wird. Wenn das Array Referenztypen enthält, werden die Referenztypen im Array zur Überwachung erneut rekursiv durchlaufen. Dies ermöglicht die Überwachung von Array-Änderungen.
• (Interviewer, die diese Frage stellen können, achten mehr auf die Tiefe, und diese allgemeinen Vorgänge sollten beachtet werden)

(Einzelheiten zur Prototypenkette finden Sie in meiner anderen Spalte)

Dieser Artikel wird Ihnen helfen Verstehen Sie die JavaScript-Prototypkette gründlich

4.nextTick Wissen Sie, was das Implementierungsprinzip ist?

• Führen Sie nach dem nächsten DOM-Aktualisierungszyklus einen verzögerten Rückruf aus. nextTick verwendet hauptsächlich Makroaufgaben und Mikroaufgaben. Versuchen Sie je nach Ausführungsumgebung,

• PromiseMutationObserver

  🎜setImmediate🎜🎜 zu verwenden. Wenn keines der oben genannten Verfahren funktioniert, verwenden Sie setTimeout🎜🎜🎜, um eine asynchrone Methode zu definieren. Durch mehrmaliges Aufrufen von nextTick wird die Methode gespeichert queue. Durch diese asynchrone Methode wird die aktuelle Warteschlange gelöscht. 🎜🎜🎜 (Informationen zu Makroaufgaben, Mikroaufgaben und Ereignisschleifen finden Sie in meinen anderen beiden Spalten) 🎜🎜 (Nachdem Sie dies gesehen haben, werden Sie feststellen, dass die Frage nach dem Framework letztendlich Ihre nativen JavaScript-Kenntnisse auf die Probe stellt) 🎜🎜🎜🎜 🎜JavaScript-Ereignisschleife im Browser🎜🎜🎜🎜🎜🎜Node.js-Ereignisschleife🎜🎜

5. Lassen Sie uns über den Lebenszyklus von Vue sprechen.

---

beforeCreate ist der erste Hook, der nach new Vue() ausgelöst wird Es kann weder auf Daten noch auf Methoden zugegriffen werden. beforeCreate是new Vue()之后触发的第一个钩子，在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。

created在实例创建完成后发生，当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，在这里更改数据不会触发updated函数。可以做一些初始数据的获取，在当前阶段无法与Dom进行交互，如果非要想，可以通过vm.$nextTick来访问Dom。

beforeMount发生在挂载之前，在这之前template模板已导入渲染函数编译。而当前阶段虚拟Dom已经创建完成，即将开始渲染。在此时也可以对数据进行更改，不会触发updated。

mounted在挂载完成后发生，在当前阶段，真实的Dom挂载完毕，数据完成双向绑定，可以访问到Dom节点，使用$refs属性对Dom进行操作。

beforeUpdate发生在更新之前，也就是响应式数据发生更新，虚拟dom重新渲染之前被触发，你可以在当前阶段进行更改数据，不会造成重渲染。

updated发生在更新完成之后，当前阶段组件Dom已完成更新。要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新。

beforeDestroy发生在实例销毁之前，在当前阶段实例完全可以被使用，我们可以在这时进行善后收尾工作，比如清除计时器。

destroyed发生在实例销毁之后，这个时候只剩下了dom空壳。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。

(关于Vue的生命周期详解感兴趣的也请移步我的另一篇专栏)

从源码解读Vue生命周期，让面试官对你刮目相看

6.你的接口请求一般放在哪个生命周期中？

---

接口请求一般放在mounted中，但需要注意的是服务端渲染时不支持mounted，需要放到created中。

7.再说一下Computed和Watch

---

Computed本质是一个具备缓存的watcher，依赖的属性发生变化就会更新视图。
适用于计算比较消耗性能的计算场景。当表达式过于复杂时，在模板中放入过多逻辑会让模板难以维护，可以将复杂的逻辑放入计算属性中处理。

Watch没有缓存性，更多的是观察的作用，可以监听某些数据执行回调。当我们需要深度监听对象中的属性时，可以打开deep：true选项，这样便会对对象中的每一项进行监听。这样会带来性能问题，优化的话可以使用字符串形式监听，如果没有写到组件中，不要忘记使用unWatch手动注销哦。

8.说一下v-if和v-show的区别

---

当条件不成立时，v-if不会渲染DOM元素，v-show操作的是样式(display)，切换当前DOM的显示和隐藏。

9.组件中的data为什么是一个函数？

---

一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。如果data是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突，data必须是一个函数。

10.说一下v-model的原理

---

v-model本质就是一个语法糖，可以看成是value + input方法的语法糖。
可以通过model属性的prop和event属性来进行自定义。原生的v-model，会根据标签的不同生成不同的事件和属性。

11.Vue事件绑定原理说一下

---

原生事件绑定是通过addEventListener绑定给真实元素的，组件事件绑定是通过Vue自定义的$on实现的。

面试官：(这小子基础还可以，接下来我得上上难度了)

12.Vue模版编译原理知道吗，能简单说一下吗？

---

简单说，Vue的编译过程就是将template转化为render函数的过程。会经历以下阶段：

• 生成AST树
• 优化
• codegen

首先解析模版，生成AST语法树

erstellt erfolgt, nachdem die Datenbeobachtung zum aktuellen Zeitpunkt abgeschlossen wurde, d. h. die Daten können hier verwendet und geändert werden, was die aktualisierte Funktion nicht auslöst. Sie können zum jetzigen Zeitpunkt keine Datenerfassung durchführen. Bei Bedarf können Sie über vm.$nextTick auf den Dom zugreifen. 🎜🎜beforeMount erfolgt vor dem Mounten, bevor die Vorlage importiert und mit Rendering-Funktionen kompiliert wurde. Zum jetzigen Zeitpunkt wurde der virtuelle Dom erstellt und steht kurz vor dem Rendern. Zu diesem Zeitpunkt können auch Änderungen an den Daten vorgenommen werden, eine Aktualisierung wird nicht ausgelöst. 🎜🎜montiert tritt auf, nachdem das Mounten abgeschlossen ist. In der aktuellen Phase ist der echte Dom gemountet, die Daten sind bidirektional gebunden, auf den Dom-Knoten kann zugegriffen werden und das Attribut $refs wird verwendet den Dom zu betreiben. 🎜🎜beforeUpdate erfolgt vor dem Update, d. h. die Reaktionsdaten werden aktualisiert und ausgelöst, bevor der virtuelle Dom erneut gerendert wird. Sie können die Daten in der aktuellen Phase ändern, ohne ein erneutes Rendering zu verursachen. 🎜🎜updated tritt auf, nachdem die Aktualisierung abgeschlossen ist und die aktuelle Bühnenkomponente Dom aktualisiert wurde. Achten Sie darauf, während dieser Zeit keine Datenänderungen vorzunehmen, da dies zu einer Endlosschleife von Aktualisierungen führen kann. 🎜🎜beforeDestroy tritt auf, bevor die Instanz zerstört wird. Die Instanz kann in der aktuellen Phase vollständig verwendet werden. Wir können zu diesem Zeitpunkt Nachbearbeitungsarbeiten durchführen, z. B. das Löschen des Timers. 🎜🎜destroyed tritt auf, nachdem die Instanz zerstört wurde. Zu diesem Zeitpunkt ist nur noch die Dom-Shell übrig. Die Komponente wurde zerlegt, die Datenbindung wurde entfernt, der Listener wurde entfernt und alle untergeordneten Instanzen wurden zerstört. 🎜

🎜(Wenn Sie an der detaillierten Erklärung des Lebenszyklus von Vue interessiert sind, gehen Sie bitte zu meiner anderen Kolumne)🎜🎜Interpretieren Sie den Vue-Lebenszyklus anhand des Quellcodes und beeindrucken Sie den Interviewer🎜🎜🎜🎜6 In welchem ​​Lebenszyklus werden Ihre Schnittstellenanforderungen im Allgemeinen platziert? 🎜🎜🎜🎜Schnittstellenanforderungen werden im Allgemeinen in mounted platziert, es ist jedoch zu beachten, dass serverseitiges Rendering das Mounten nicht unterstützt und in created platziert werden muss. 🎜🎜🎜🎜7. Reden wir über Computed und Watch🎜🎜🎜🎜Computed ist im Wesentlichen ein Watcher mit Cache. Wenn sich die abhängigen Eigenschaften ändern, wird die Ansicht aktualisiert. 🎜Geeignet für Rechenszenarien, in denen Berechnungen relativ viel Leistung verbrauchen. Wenn der Ausdruck zu komplex ist und zu viel Logik in die Vorlage eingefügt wird, wird die Verwaltung der Vorlage erschwert. Sie können die komplexe Logik in berechnete Eigenschaften einfügen. 🎜🎜🎜Watch ist nicht zwischenspeicherbar. Es handelt sich eher um eine Beobachtungsfunktion. Es kann bestimmte Daten überwachen und Rückrufe ausführen. Wenn wir die Eigenschaften im Objekt genau überwachen müssen, können wir die Option deep: true aktivieren, sodass jedes Element im Objekt überwacht wird. Dies führt zu Leistungsproblemen. Sie können string form zur Überwachung verwenden. Wenn es nicht in die Komponente geschrieben wird, vergessen Sie nicht, unWatch zum manuellen Abmelden zu verwenden. 🎜🎜🎜8. Lassen Sie uns über den Unterschied zwischen v-if und v-show sprechen🎜🎜🎜🎜Wenn die Bedingungen nicht erfüllt sind, rendert v-if das DOM-Element v nicht -showDie Operation ist Stil (Anzeige), Umschalten der Anzeige und Ausblenden des aktuellen DOM. 🎜🎜🎜🎜9. Warum sind die Daten in der Komponente eine Funktion? 🎜🎜🎜🎜Wenn eine Komponente mehrmals wiederverwendet wird, werden mehrere Instanzen erstellt. Im Wesentlichen verwenden diese Instanzen alle denselben Konstruktor. Wenn Daten ein Objekt sind, ist das Objekt ein Referenztyp und wirkt sich auf alle Instanzen aus. Um sicherzustellen, dass Daten nicht zwischen verschiedenen Instanzen der Komponente in Konflikt geraten, müssen Daten eine Funktion sein. 🎜🎜🎜🎜10. Lassen Sie uns über das Prinzip des V-Modells sprechen🎜🎜🎜🎜v-model ist im Wesentlichen ein syntaktischer Zucker, der als Syntax von value + input angesehen werden kann Methode Zucker. 🎜Kann über die Attribute prop und event des Modellattributs angepasst werden. Das native V-Modell generiert unterschiedliche Ereignisse und Attribute basierend auf unterschiedlichen Tags. 🎜🎜🎜11. Lassen Sie uns über das Prinzip der Vue-Ereignisbindung sprechen. Die native Ereignisbindung wird über addEventListener an reale Elemente gebunden, und die Komponentenereignisbindung wird über Vue $onimplementiert. 🎜🎜<blockquote>Interviewer: (Die Grundlagen dieses Kerls sind ziemlich gut, ich muss als nächstes weitermachen)🎜🎜🎜12 Kennen Sie das Prinzip der Vue-Vorlagenkompilierung? 🎜🎜🎜🎜Einfach ausgedrückt ist der Kompilierungsprozess von Vue der Prozess der Konvertierung von <code>template in die Funktion render. Es durchläuft die folgenden Phasen: 🎜🎜

• AST-Baum generieren🎜
• Optimieren🎜
• Codegenerierung🎜🎜🎜Parsen Sie zunächst die Vorlage und generieren Sie den AST-Syntaxbaum (a JavaScript-Objekt zur Beschreibung der gesamten Vorlage). 🎜Verwenden Sie eine große Anzahl regulärer Ausdrücke, um Vorlagen zu analysieren. Wenn Sie auf Tags und Text stoßen, werden entsprechende Hooks für die entsprechende Verarbeitung ausgeführt. 🎜

  Vues Daten reagieren, aber tatsächlich reagieren nicht alle Daten in der Vorlage. Einige Daten ändern sich nach dem ersten Rendern nicht und auch das entsprechende DOM ändert sich nicht. Anschließend besteht der Optimierungsprozess darin, den AST-Baum tief zu durchqueren und die Baumknoten entsprechend den relevanten Bedingungen zu markieren. Wir können den Vergleich dieser markierten Knoten (statische Knoten) überspringen, wodurch die Laufzeitvorlage erheblich optimiert wird. 跳过对它们的比对，对运行时的模板起到很大的优化作用。

  编译的最后一步是将优化后的AST树转换为可执行的代码。

  面试官：(精神小伙啊，有点东西，难度提升，不信难不倒你)

  13.Vue2.x和Vue3.x渲染器的diff算法分别说一下

  ---

  简单来说，diff算法有以下过程
  

  • 同级比较，再比较子节点
  • 先判断一方有子节点一方没有子节点的情况(如果新的children没有子节点，将旧的子节点移除)
  • 比较都有子节点的情况(核心diff)
  • 递归比较子节点

  正常Diff两个树的时间复杂度是O(n^3)，但实际情况下我们很少会进行跨层级的移动DOM，所以Vue将Diff进行了优化，从O(n^3) -> O(n)，只有当新旧children都为多个子节点时才需要用核心的Diff算法进行同层级比较。

  Vue2的核心Diff算法采用了双端比较的算法，同时从新旧children的两端开始进行比较，借助key值找到可复用的节点，再进行相关操作。相比React的Diff算法，同样情况下可以减少移动节点次数，减少不必要的性能损耗，更加的优雅。

  Vue3.x借鉴了
  ivi算法和 inferno算法

  在创建VNode时就确定其类型，以及在 mount/patch 的过程中采用位运算来判断一个VNode的类型，在这个基础之上再配合核心的Diff算法，使得性能上较Vue2.x有了提升。(实际的实现可以结合Vue3.x源码看。)

  该算法中还运用了动态规划的思想求解最长递归子序列。

  (看到这你还会发现，框架内无处不蕴藏着数据结构和算法的魅力)

  面试官：(可以可以，看来是个苗子，不过自我介绍属实有些无聊，下一题)

  (基操，勿6)

  14.再说一下虚拟Dom以及key属性的作用

  ---

  由于在浏览器中操作DOM是很昂贵的。频繁的操作DOM，会产生一定的性能问题。这就是虚拟Dom的产生原因。
  

  Vue2的Virtual DOM借鉴了开源库snabbdom的实现。

  Virtual DOM本质就是用一个原生的JS对象去描述一个DOM节点。是对真实DOM的一层抽象。(也就是源码中的VNode类，它定义在src/core/vdom/vnode.js中。)

  VirtualDOM映射到真实DOM要经历VNode的create、diff、patch等阶段。

  key的作用是尽可能的复用 DOM 元素。

  新旧 children 中的节点只有顺序是不同的时候，最佳的操作应该是通过移动元素的位置来达到更新的目的。

  需要在新旧 children 的节点中保存映射关系，以便能够在旧 children 的节点中找到可复用的节点。key也就是children中节点的唯一标识。

  15.keep-alive了解吗

  ---

  keep-alive可以实现组件缓存，当组件切换时不会对当前组件进行卸载。
  

  常用的两个属性include/exclude，允许组件有条件的进行缓存。

  两个生命周期activated/deactivated，用来得知当前组件是否处于活跃状态。

  keep-alive的中还运用了LRU(Least Recently Used)算法。

  （又是数据结构与算法，原来算法在前端也有这么多的应用）

  16.Vue中组件生命周期调用顺序说一下

  ---

  组件的调用顺序都是先父后子,渲染完成的顺序是先子后父。
  

  组件的销毁操作是先父后子，销毁完成的顺序是先子后父。

  加载渲染过程

  父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount- >子mounted->父mounted

  子组件更新过程

  父beforeUpdate->子beforeUpdate->子updated->父updated

  父组件更新过程

  父 beforeUpdate -> 父 updated

  Der letzte Schritt der Kompilierung besteht darin, den optimierten AST-Baum in ausführbaren Code umzuwandeln. 🎜

  Interviewer: (Du bist ein temperamentvoller Typ, du hast etwas, die Schwierigkeit wird erhöht. Wenn du es nicht glaubst, wird es dir nicht schwer fallen)

  13. Schauen wir uns die Diff-Algorithmen der Vue2.x- und Vue3.x-Renderer an

  ---

  🎜Einfach ausgedrückt hat der Diff-Algorithmus den folgenden Prozess
  🎜
  • Vergleichen Sie die gleiche Ebene und vergleichen Sie dann die untergeordneten Knoten.
  • Bestimmen Sie zunächst, ob eine Partei untergeordnete Knoten hat und die andere nicht (wenn die neuen untergeordneten Knoten keine untergeordneten Knoten haben, entfernen Sie diese alte untergeordnete Knoten)
  • Vergleichen Sie die Situation, in der untergeordnete Knoten vorhanden sind (Kerndiff)
  • Untergeordnete Knoten rekursiv vergleichen
  🎜Die zeitliche Komplexität des normalen Diff zwischen zwei Bäume ist O(n^3), aber in tatsächlichen Situationen machen wir es selten Move DOM über Ebenen

, also optimiert Vue Diff von O(n^3). ) -> O(n), nur wenn sowohl die alten als auch die neuen untergeordneten Elemente mehrere untergeordnete Elemente sind. Es ist nur erforderlich, den Kern-Diff-Algorithmus zu verwenden, um Vergleiche auf derselben Ebene an Knoten durchzuführen. 🎜🎜Der Kern-Diff-Algorithmus von Vue2 übernimmt den Double-End-Vergleich-Algorithmus. Gleichzeitig beginnt er mit dem Vergleich von beiden Enden der alten und neuen untergeordneten Elemente und verwendet den Schlüsselwert, um die Wiederverwendbarkeit zu finden Knoten und führt dann entsprechende Vorgänge aus. Im Vergleich zum Diff-Algorithmus von React kann er unter den gleichen Umständen die Anzahl der mobilen Knoten reduzieren, unnötige Leistungsverluste reduzieren und ist eleganter. 🎜🎜Vue3.x basiert auf dem
ivi-Algorithmus und Inferno-Algorithmus 🎜🎜 bestimmt den Typ des VNode, wenn er erstellt wird und wann mount/ Im Patch-Prozess wird die Bit-Operation verwendet, um den Typ eines VNode zu bestimmen. Auf dieser Basis wird in Kombination mit dem Kern-Diff-Algorithmus die Leistung im Vergleich zu Vue2 verbessert. X. (Die tatsächliche Implementierung kann in Verbindung mit dem Vue3.x-Quellcode angezeigt werden.) 🎜🎜Dieser Algorithmus verwendet auch die Idee der dynamischen Programmierung, um die längste rekursive Teilsequenz zu lösen. 🎜🎜(Nachdem Sie das gesehen haben, werden Sie auch feststellen, dass der Charme von Datenstrukturen und Algorithmen überall im Framework steckt)🎜

Interviewer: (Okay, okay, es scheint eine vielversprechende Person zu sein, aber die Selbstvorstellung ist es etwas langweilig, nächster Schritt Frage)

🎜(grundlegende Bedienung, nicht 6)🎜

14. Sprechen wir über die Rolle des virtuellen Doms und Schlüsselattribute

---

🎜Denn im Browser ist die Manipulation des DOM teuer. Häufige Vorgänge im DOM führen zu bestimmten Leistungsproblemen. Dies ist die Ursache des virtuellen Doms.
🎜🎜Vue2s Virtual DOM basiert auf der Implementierung der Open-Source-Bibliothek snabbdom. 🎜🎜Virtual DOM verwendet im Wesentlichen ein natives JS-Objekt, um einen DOM-Knoten zu beschreiben. Es ist eine Abstraktionsebene vom realen DOM. (Das heißt, die VNode-Klasse im Quellcode, die in src/core/vdom/vnode.js definiert ist.) 🎜🎜VirtualDOM-Zuordnung zum realen DOM muss die Schritte Create, Diff, Patch und andere durchlaufen Phasen von VNode. 🎜🎜Die Rolle des Schlüssels besteht darin, DOM-Elemente so weit wie möglich wiederzuverwenden. 🎜🎜Wenn nur die Reihenfolge der Knoten in den alten und neuen untergeordneten Elementen unterschiedlich ist, sollte die beste Operation darin bestehen, den Zweck der Aktualisierung durch Verschieben der Position des Elements zu erreichen. 🎜🎜Sie müssen die Zuordnungsbeziehung zwischen den alten und neuen untergeordneten Knoten speichern, damit wiederverwendbare Knoten in den alten untergeordneten Knoten gefunden werden können. Der Schlüssel ist die eindeutige Kennung des Knotens in untergeordneten Knoten. 🎜

15. Kennen Sie Keep-Alive?

---

🎜keep-alive kann das Komponenten-Caching realisieren , die aktuelle Komponente wird nicht zwischengespeichert.
🎜🎜Die beiden häufig verwendeten Attribute include/exclude ermöglichen das bedingte Zwischenspeichern von Komponenten. 🎜🎜Zwei Lebenszyklen aktiviert/deaktiviert, die verwendet werden, um zu wissen, ob die aktuelle Komponente aktiv ist. 🎜🎜keep-alive verwendet auch den LRU (Least Latest Used)-Algorithmus. 🎜🎜 (Es geht wieder um Datenstruktur und Algorithmus. Es stellt sich heraus, dass Algorithmen auch so viele Anwendungen im Frontend haben) 🎜

16. Sprechen wir über die Aufrufsequenz des Komponentenlebenszyklus in Vue

---

🎜Die Aufrufreihenfolge der Komponenten ist zuerst übergeordnetes Element, dann untergeordnetes Element, und die Reihenfolge der Render-Vervollständigung ist zuerst untergeordnetes Element, dann übergeordnetes Element.
🎜🎜Der Zerstörungsvorgang der Komponenten ist zuerst das übergeordnete Element, dann das übergeordnete Element, und die Reihenfolge der Zerstörung lautet zuerst das übergeordnete Element, dann das übergeordnete Element. 🎜🎜Rendering-Prozess wird geladen🎜🎜Parent beforeCreate->Parent erstellt->Parent beforeMount->Kind beforeCreate->Kind erstellt->Kind beforeMount- >Kind montiert->Eltern montiert🎜🎜Aktualisierungsprozess der Unterkomponente🎜🎜Parent beforeUpdate->child beforeUpdate->child aktualisiert->parent aktualisiert🎜🎜parent Komponentenaktualisierungsprozess🎜🎜Parent beforeUpdate -> Parent aktualisiert🎜

Zerstörungsprozess

parent beforeDestroy->child beforeDestroy->child destroy->parent destroy父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

17.Vue2.x组件通信有哪些方式？

---

• 父子组件通信

  父->子props，子->父 $on、$emit

  获取父子组件实例 $parent、$children

  Ref 获取实例的方式调用组件的属性或者方法

  Provide、inject 官方不推荐使用，但是写组件库时很常用

• 兄弟组件通信

  Event Bus 实现跨组件通信 Vue.prototype.$bus = new Vue

  Vuex

• 跨级组件通信

  Vuex

  $attrs、$listeners

  Provide、inject

18.SSR了解吗？

---

SSR也就是服务端渲染，也就是将Vue在客户端把标签渲染成HTML的工作放在服务端完成，然后再把html直接返回给客户端。

SSR有着更好的SEO、并且首屏加载速度更快等优点。不过它也有一些缺点，比如我们的开发条件会受到限制，服务器端渲染只支持beforeCreate和created两个钩子，当我们需要一些外部扩展库时需要特殊处理，服务端渲染应用程序也需要处于Node.js的运行环境。还有就是服务器会有更大的负载需求。

19.你都做过哪些Vue的性能优化？

---

编码阶段

• 尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher
• v-if和v-for不能连用
• 如果需要使用v-for给每项元素绑定事件时使用事件代理
• SPA 页面采用keep-alive缓存组件
• 在更多的情况下，使用v-if替代v-show
• key保证唯一
• 使用路由懒加载、异步组件
• 防抖、节流
• 第三方模块按需导入
• 长列表滚动到可视区域动态加载
• 图片懒加载

SEO优化

• 预渲染
• 服务端渲染SSR

打包优化

• 压缩代码
• Tree Shaking/Scope Hoisting
• 使用cdn加载第三方模块
• 多线程打包happypack
• splitChunks抽离公共文件
• sourceMap优化

用户体验

• 骨架屏
• PWA

还可以使用缓存(客户端缓存、服务端缓存)优化、服务端开启gzip压缩等。

(优化是个大工程，会涉及很多方面，这里申请另开一个专栏)

20.hash路由和history路由实现原理说一下

---

location.hash的值实际就是URL中#后面的东西。

history实际采用了HTML5中提供的API来实现，主要有history.pushState()和history.replaceState()

17. Welche Möglichkeiten gibt es für Vue2.x-Komponenten zu kommunizieren? ?

---

• Eltern-Kind-Komponentenkommunikation
  Parent->Childprops, Child->Parent$on, $emit<p></p>Holen Sie sich die Instanz der übergeordneten/untergeordneten Komponente<code>$parent, $children

  Ref Rufen Sie die Instanz ab, indem Sie die Eigenschaften oder Methoden der Komponente aufrufen

  Provide , inject Offiziell nicht empfohlen, wird aber sehr häufig beim Schreiben von Komponentenbibliotheken verwendet🎜
• Schwesterkomponentenkommunikation🎜Event Bus realisiert komponentenübergreifende KommunikationVue .prototype.$bus = neues Vue 🎜🎜Vuex🎜
• Ebenenübergreifende Komponentenkommunikation🎜Vuex🎜🎜$ attrs, $listeners🎜 🎜Bereitstellen, injizieren🎜

🎜18. Verstehen Sie SSR? 🎜

---

🎜SSR bedeutet serverseitiges Rendern. bedeutet, dass Vue Tags auf der Clientseite in HTML rendert und auf der Serverseite vervollständigt und den HTML-Code dann direkt an den Client zurückgibt. Code>. <br>🎜🎜SSR bietet die Vorteile einer besseren SEO und einer schnelleren Ladegeschwindigkeit des ersten Bildschirms. Es weist jedoch auch einige Mängel auf. Beispielsweise werden beim serverseitigen Rendern nur zwei Hooks unterstützt: <code>beforeCreate Dies ist erforderlich, wenn wir Für eine spezielle Verarbeitung benötigen serverseitige Rendering-Anwendungen auch einige externe Erweiterungsbibliotheken in der Node.js-Laufumgebung. Außerdem besteht eine höhere Lastanforderung an den Server. 🎜

🎜19. Welche Leistungsoptimierungen haben Sie für Vue vorgenommen? 🎜

---

🎜🎜🎜Codierungsphase🎜🎜
🎜

• Minimieren Sie die Daten in den Daten und fügen Sie Getter und Setter hinzu gesammelt werden
• v-if und v-for können nicht zusammen verwendet werden
• Wenn Sie v-for verwenden müssen, um Ereignisse an jedes Element zu binden, verwenden Sie einen Ereignis-Proxy
• Die SPA-Seite verwendet die Keep-Alive-Cache-Komponente
• Verwenden Sie in mehr Fällen v-if anstelle von v-show
• Schlüssel garantiert Eindeutigkeit
• Verwendung Routing von verzögertem Laden und asynchronen Komponenten
• Anti-Shake, Drosselung
• Module von Drittanbietern nach Bedarf importieren
• Scrollen Sie die lange Liste in den sichtbaren Bereich und laden Sie sie dynamisch
• Verzögertes Laden von Bildern

🎜🎜🎜SEO-Optimierung🎜🎜🎜

• Vor-Rendering
• Serverseitiges Rendering SSR li>

🎜🎜🎜Verpackungsoptimierung🎜 🎜🎜

• Code komprimieren
• Tree Shaking/Scope Hoisting
• CDN verwenden, um Module von Drittanbietern zu laden
• Multithread-Verpackung Happypack
• splitChunks extrahieren öffentliche Dateien
• SourceMap-Optimierung

🎜🎜🎜Benutzererfahrung🎜🎜🎜

• Skelettbildschirm
• PWA

🎜Sie können auch die Cache-Optimierung (Client-Cache, Server-Cache) verwenden, die GZIP-Komprimierung auf dem Server aktivieren usw. 🎜🎜(Optimierung ist ein großes Projekt und wird viele Aspekte umfassen. Bitte öffnen Sie hier eine weitere Spalte)🎜

🎜20. Sprechen wir über die Implementierungsprinzipien von Hash-Routing und History-Routing🎜

---

🎜location Der Wert von .hash ist eigentlich das, was in der URL auf # folgt.
🎜🎜history wird tatsächlich mithilfe der in HTML5 bereitgestellten API implementiert, die hauptsächlich history.pushState() und history.replaceState() umfasst. 🎜🎜Der Interviewer nahm den bereits kalten Kaffee neben sich und trank einen Schluck. 🎜🎜(Darf ich diesem Kerl nicht noch mehr Fragen stellen?)🎜🎜Für mehr Programmierkenntnisse besuchen Sie bitte: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonÜber 20 wichtige Vue-Interviewfragen (mit Antwortanalyse). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!