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.
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视频教程）
Vue在初始化数据时，会使用Object.defineProperty重新定义data中的所有属性，当页面使用对应属性时，首先会进行依赖收集(收集当前组件的watcher)如果属性发生变化会通知相关依赖进行更新操作(发布订阅)。
(还好我有看，这个难不倒我)
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.
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
Beim Überwachen eines Arrays kann Get/Set mehrmals ausgelöst werden. Wie kann man also verhindern, dass es mehrmals ausgelöst wird?reactiveals Proxy. Auf diese Weise wird eine detaillierte Beobachtung erreicht .
Dieser Artikel wird Ihnen helfen Verstehen Sie die JavaScript-Prototypkette gründlich4.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,
- 🎜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🎜🎜
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的生命周期详解感兴趣的也请移步我的另一篇专栏)
接口请求一般放在mounted中，但需要注意的是服务端渲染时不支持mounted，需要放到created中。
Computed本质是一个具备缓存的watcher，依赖的属性发生变化就会更新视图。
适用于计算比较消耗性能的计算场景。当表达式过于复杂时，在模板中放入过多逻辑会让模板难以维护，可以将复杂的逻辑放入计算属性中处理。
Watch没有缓存性，更多的是观察的作用，可以监听某些数据执行回调。当我们需要深度监听对象中的属性时，可以打开deep：true选项，这样便会对对象中的每一项进行监听。这样会带来性能问题，优化的话可以使用字符串形式监听，如果没有写到组件中，不要忘记使用unWatch手动注销哦。
当条件不成立时，v-if不会渲染DOM元素，v-show操作的是样式(display)，切换当前DOM的显示和隐藏。
一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。如果data是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突，data必须是一个函数。
v-model本质就是一个语法糖，可以看成是value + input方法的语法糖。
可以通过model属性的prop和event属性来进行自定义。原生的v-model，会根据标签的不同生成不同的事件和属性。
原生事件绑定是通过addEventListener绑定给真实元素的，组件事件绑定是通过Vue自定义的$on实现的。
面试官：(这小子基础还可以，接下来我得上上难度了)
简单说，Vue的编译过程就是将template转化为render函数的过程。会经历以下阶段：
首先解析模版，生成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, also optimiert Vue Diff vonmountedplatziert, es ist jedoch zu beachten, dass serverseitiges Rendering das Mounten nicht unterstützt und increatedplatziert werden muss. 🎜🎜🎜🎜7. Reden wir über Computed und Watch🎜🎜🎜🎜Computedist 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. 🎜🎜🎜Watchist 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 Optiondeep: trueaktivieren, sodass jedes Element im Objekt überwacht wird. Dies führt zu Leistungsproblemen. Sie könnenstring formzur Ü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, rendertv-ifdas DOM-Elementv 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 verwendendiese 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-modelist im Wesentlichen ein syntaktischer Zucker, der als Syntax vonvalue + input angesehen werden kannMethode Zucker. 🎜Kann über die Attributepropundeventdes 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 überaddEventListeneran 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>templatein die Funktionrender. 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算法，同样情况下可以减少移动节点次数，减少不必要的性能损耗，更加的优雅。在创建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父组件更新过程
Der letzte Schritt der Kompilierung besteht darin, den optimierten AST-Baum
父 beforeUpdate -> 父 updatedin 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
🎜🎜Die zeitliche Komplexität des normalen Diff zwischen zwei Bäume ist
- 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
O(n^3), aber in tatsächlichen Situationen machen wir es selten Move DOM über Ebenen
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 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)🎜
Ursache des virtuellen Doms. 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. 🎜keep-alive kann das Komponenten-Caching realisieren , die aktuelle Komponente wird nicht zwischengespeichert. 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) 🎜zuerst übergeordnetes Element, dann untergeordnetes Element, und die Reihenfolge der Render-Vervollständigung ist zuerst untergeordnetes Element, dann übergeordnetes Element. 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
父子组件通信
父->子props，子->父 $on、$emit
获取父子组件实例 $parent、$children
Ref 获取实例的方式调用组件的属性或者方法
Provide、inject 官方不推荐使用，但是写组件库时很常用
Event Bus 实现跨组件通信 Vue.prototype.$bus = new Vue
Vuex
Vuex
$attrs、$listeners
Provide、inject
SSR也就是服务端渲染，也就是将Vue在客户端把标签渲染成HTML的工作放在服务端完成，然后再把html直接返回给客户端。
SSR有着更好的SEO、并且首屏加载速度更快等优点。不过它也有一些缺点，比如我们的开发条件会受到限制，服务器端渲染只支持beforeCreate和created两个钩子，当我们需要一些外部扩展库时需要特殊处理，服务端渲染应用程序也需要处于Node.js的运行环境。还有就是服务器会有更大的负载需求。
编码阶段
SEO优化
打包优化
用户体验
还可以使用缓存(客户端缓存、服务端缓存)优化、服务端开启gzip压缩等。
(优化是个大工程，会涉及很多方面，这里申请另开一个专栏)
location.hash的值实际就是URL中#后面的东西。
history实际采用了HTML5中提供的API来实现，主要有history.pushState()和history.replaceState()
props, Child->Parent$on, $emit<p></p>Holen Sie sich die Instanz der übergeordneten/untergeordneten Komponente<code>$parent, $childrenRef 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🎜
Event Bus realisiert komponentenübergreifende KommunikationVue .prototype.$bus = neues Vue 🎜🎜Vuex🎜Vuex🎜🎜$ attrs, $listeners🎜 🎜Bereitstellen, injizieren🎜 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. 🎜# folgt. 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!
