[Zusammenstellen und teilen] Einige hochfrequente Interviewfragen von Vue

Dieses Mal werde ich einige häufige Interviewfragen zu Vue mit Ihnen teilen, um Ihnen dabei zu helfen, das Grundwissen zu sortieren und Ihren Vue-Wissensvorrat zu erweitern. Es lohnt sich, zu sammeln, kommen Sie vorbei!

Was ich teile, sind einige häufig gestellte Vue-Interviewfragen, aber sie repräsentieren nicht alle. Wenn im Artikel etwas nicht stimmt, weisen Sie bitte darauf hin. Wenn Sie Zweifel haben oder andere Interviewfragen haben, können Sie auch eine Nachricht zum Teilen hinterlassen.

1. Welche Kommunikationsmethoden gibt es für vue2.0-Komponenten?

• Eltern-Kind-Komponentenkommunikation: props und event, v- model, .sync, ref, $parent und $children. (Teilen von Lernvideos: vue-Video-Tutorialprops 和 event、v- model、 .sync、 ref、 $parent 和 $children。（学习视频分享：vue视频教程）

• 非父子组件通信：$attr 和 $listeners、 provide 和 inject、eventbus、通过根实例$root访问、vuex、dispatch 和 brodcast

2. v-model是如何实现双向绑定的？

• vue 2.0v-model 是⽤来在表单控件或者组件上创建双向绑定的，他 的本质是 v-bind 和 v-on 的语法糖，在 ⼀个组件上使⽤ v-model ，默认会为组件绑定名为 value 的 prop 和名为 input 的事件。

• Vue3.0 在 3.x 中，⾃定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的update:modelValue 事件

3. Vuex和单纯的全局对象有什么区别？

Vuex和全局对象主要有两种区别：

• Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发⽣变 化，那么相应的组件也会相应地得到⾼效更新。

• 不能直接改变 store 中的状态。改变 store 中的状态的唯⼀途径就是显式地提交 (commit)mutation。这样使得我们可以⽅便地跟踪每⼀个状态的变化，从⽽让我们能够实现⼀些⼯ 具帮助我们更好地了解我们的应⽤。

4. Vue 的⽗组件和⼦组件⽣命周期钩⼦执⾏顺序是什么？

渲染过程：⽗组件挂载完成⼀定是等⼦组件都挂载完成后，才算是⽗组件 挂载完，所以⽗组件的mounted在⼦组件mouted之后

⽗beforeCreate -> ⽗created -> ⽗beforeMount -> ⼦beforeCreate -> ⼦created -> ⼦beforeMount -> ⼦mounted -> ⽗mounted

⼦组件更新过程：

1. 影响到⽗组件： ⽗beforeUpdate -> ⼦beforeUpdate->⼦updated -> ⽗ updted
2. 不影响⽗组件： ⼦beforeUpdate -> ⼦updated

⽗组件更新过程：

1. 影响到⼦组件： ⽗beforeUpdate -> ⼦beforeUpdate->⼦updated -> ⽗ updted
2. 不影响⼦组件： ⽗beforeUpdate -> ⽗updated

销毁过程：⽗beforeDestroy -> ⼦beforeDestroy -> ⼦ destroyed -> ⽗destroyed

看起来很多好像很难记忆，其实只要理解了，不管是哪种情况，都⼀定是⽗组件等待⼦组件完 成后，才会执⾏⾃⼰对应完成的钩⼦，就可以很容易记住

5. v-show 和 v-if 有哪些区别？

• v-if 会在切换过程中对条件块的事件监听器和⼦组件进⾏销毁和重建，如果初始条件是false，则什么都不做，直到条件第⼀次为true时才开始渲 染模块。

• v-show 只是基于css进⾏切换，不管初始条件是 什么，都会渲染。

所以， v-if 切换的开销更⼤，⽽ v-show 初始化渲染开销更 ⼤，在需要频繁切换，或者切换的部分dom很复杂时，使⽤ v-show 更合 适。渲染后很少切换的则使⽤ v-if)

Nicht-Eltern-Kind-Komponentenkommunikation: $attr und $listeners, provide und inject, eventbus, Zugriff über die Root-Instanz $root, vuex , versand und broadcast

2. Wie implementiert das V-Modell die bidirektionale Bindung?

vue 2.0v-model wird verwendet, um eine bidirektionale Bindung für Formularsteuerelemente oder Komponenten zu erstellen Die Essenz ist syntaktischer Zucker für v-bind und v-on. Durch die Verwendung von v-model für eine Komponente wird standardmäßig die Komponente mit dem Namen value gebunden. prop und ein Ereignis namens input. 🎜🎜🎜Vue3.0 In 3.x entspricht v-model für eine benutzerdefinierte Komponente der Übergabe von modelValue prop und erhalten Sie das ausgelöste update:modelValue-Ereignis🎜

🎜3 der Unterschied zwischen Objekten? 🎜🎜🎜🎜Es gibt zwei Hauptunterschiede zwischen Vuex und globalen Objekten: 🎜🎜

🎜🎜Der Zustandsspeicher von Vuex reagiert. Wenn die Vue-Komponente den Status aus dem Store liest, wenn der Store Der Status in Wenn die Aktualisierung erfolgt, werden die entsprechenden Komponenten entsprechend effizient aktualisiert. 🎜🎜🎜Sie können den Status im Shop nicht direkt ändern. Die einzige Möglichkeit, den Status im Speicher zu ändern, besteht darin, ihn explizit festzuschreiben (begehen)Mutation. Dies ermöglicht es uns, Änderungen in jedem Zustand leicht zu verfolgen und einige Aufgaben umzusetzen Tools helfen uns, unsere Anwendungen besser zu verstehen. 🎜

🎜4 Wie ist die Ausführungsreihenfolge der übergeordneten Komponenten- und Unterkomponenten-Lebenszyklus-Hooks? 🎜🎜🎜🎜Rendering-Prozess: 🎜⽗Die Komponentenmontage darf erst abgeschlossen sein, nachdem alle Unterkomponenten montiert sind. Die Montage ist abgeschlossen, die montierte Komponente wird also montiert 🎜🎜beforeCreate -> ◗beforeMount -> subcreated -> subbeforeMount ⽗montiert aktualisiert🎜 wirkt sich nicht auf die ⽗-Komponente aus: ⼦beforeUpdate -> ; ⼦ beforeUpdate->⼼aktualisiert -> aktualisiert🎜Betrifft keine Unterkomponenten: ⽗beforeUpdate -> ⽗updated🎜🎜Zerstörungsprozess: 🎜⽗beforeDestroy -> zerstört -> ◗zerstört🎜🎜 sieht nach viel aus und ist schwer zu merken. Solange Sie es verstehen, muss es sich tatsächlich um die übergeordnete Komponente handeln, die auf den Abschluss der untergeordneten Komponente wartet. Nach Abschluss wird der entsprechende abgeschlossene Hook ausgeführt, der sich leicht merken lässt🎜

🎜5 Was sind die Unterschiede zwischen v-show und v-if? 🎜🎜🎜🎜🎜v-if wird die Ereignis-Listener und Unterkomponenten des bedingten Blocks während des Umschaltvorgangs zerstören und neu erstellen wird erst gestartet, wenn die Bedingung zum ersten Mal erfüllt ist. Färbemodul. 🎜🎜🎜v-show ist lediglich 🎜Umschalten basierend auf CSS🎜, unabhängig von den Anfangsbedingungen Alles wird gerendert. 🎜🎜Die Kosten für den v-if-Wechsel sind also höher, und die Kosten für das v-show-Initialisierungsrendering sind höher ⼼, 🎜Wenn häufiges Umschalten erforderlich ist oder der zu wechselnde Teil des DOM sehr komplex ist, ist die Verwendung von v-show besser geeignet geeignet. Wenn Sie nach dem Rendern selten wechseln, ist die Verwendung von v-if besser geeignet. 🎜🎜🎜🎜6. Welche Probleme verursacht V-HTML in Vue? 🎜🎜🎜Die dynamische Darstellung von beliebigem HTML auf der Website kann leicht zu XSS-Angriffen führen🎜. Es kann also nur im Rahmen der Glaubwürdigkeit liegen Verwenden Sie v-html für Inhalte und sollte niemals für vom Benutzer übermittelte Inhalte verwendet werden. 🎜

7. Welche Rolle spielt der Schlüssel in v-for?

key ist die eindeutige id, die jedem vnode gleichzeitig zugewiesen wird Während des vnode-Diff-Prozesses können Sie den key schnell vergleichen, um festzustellen, ob dies der Fall ist Unabhängig davon, ob es sich um denselben Knoten handelt, kann die Eindeutigkeit des key verwendet werden, um die map schneller zu generieren Holen Sie sich den entsprechenden Knoten. key 是给每个 vnode 指定的唯⼀ id ，在同 级的 vnode diff 过程中，可以根据 key 快速的对⽐，来判断是 否为相同节点，并且利⽤ key 的唯⼀性可以⽣成 map 来更快的获 取相应的节点。

另外指定 key 后，就不再采⽤“就地复⽤”策略了，可以保证渲染的准确性 。

8. 为什么 v-for 和 v-if 不建议⽤在⼀起

• 当 v-for 和 v-if 处于同⼀个节点时， v- for 的优先级⽐ v-if 更⾼，这意味着 v-if 将分别重复 运⾏于每个 v-for 循环中。如果要遍历的数组很⼤，⽽真正要展示的数据很少时 ，这将造成很⼤的性能浪费。
• 这种场景建议使⽤ computed ，先对数据进⾏过滤。

9. vue-router hash 模式和 history 模式有什么区别？

区别：

• url 展示上，hash 模式有 "#"，history 模式没有

• 刷新⻚⾯时，hash 模式可以正常加载到 hash 值对应的⻚⾯，⽽ history 没有处 理的话，会返回404，⼀般需要后端将所有⻚⾯都配置重定向到⾸⻚路由。

• 兼容性。hash 可以⽀持低版本浏览器和 IE

10. vue-router hash 模式和 history 模式是如何实现的？

• hash 模式：

# 后⾯ hash 值的变化，不会导致浏览器向服务器发出请求，浏览器不发出请 求，就不会刷新⻚⾯。同时通过监听 hashchange 事件可以知道 hash 发⽣了哪些变化，然后根据 hash 变化来实现更新⻚⾯部分内容的操作。

• history 模式：

history 模式的实现，主要是 HTML5 标准发布的两个 API， pushState 和 replaceState ，这两个 API 可以在改变 url，但是不会发送请求。这样就可以监 听 url 变化来实现更新⻚⾯部分内容的操作。

11. vue3.0 相对于 vue2.x 有哪些变化？

• 监测机制的改变（Object.defineProperty —> Proxy）
• 模板
• 对象式的组件声明⽅式 （class）
• 使⽤ts
• 其它⽅⾯的更改：⽀持⾃定义渲染器、 ⽀持 Fragment（多个根节点）和 Protal（在 dom 其他部分渲染组建内容）组件、基于 treeshaking 优化，提供了更多的内置功能

12. 那你能讲⼀讲MVVM吗？

• MVVM是 Model-View-ViewModel 缩写，也就是把 MVC 中 的 Controller 演变成 ViewModel 。
• Model层代表数据模型，View代表UI组件，ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并⾃动将数据渲染到⻚⾯中，视图变化的时候会通知 viewModel层更新数据。

13. vue 中组件 data 为什么是 return ⼀个对象的函数，⽽不是直接是个对象？

• 如果将data定义为对象，这就表示所有的组件实例共⽤了⼀份data数据，因此，⽆论在哪个组件实例中修改了data,都会影响到所有的组件实例。
• 组件中的data写成⼀个函数，数据以函数返回值形式定义，这样每复 ⽤⼀次组件，就会返回⼀份新的data，类似于给每个组件实例创建⼀个私有的数据空间，让各个组件实例维护各⾃的数据。⽽单纯的写成对象形式，就使得所有组件实例共⽤ 了⼀份data，就会造成⼀个变了全都会变的结果。

14. Vue 中的 computed 是如何实现的

流程总结如下：

1、当组件初始化的时候， computed 和 data 会分别建⽴各 ⾃的响应系统， Observer 遍历 data中每个属性设置 get/set 数据拦截

2、初始化 computed 会调⽤ initComputed 函数

• 注册⼀个 watcher 实例，并在内实例化⼀个 Dep 消 息订阅器⽤作后续收集依赖（⽐如渲染函数的 watcher 或者其他观察该计算属性 变化的 watcher ）

• 调⽤计算属性时会触发其 Object.defineProperty 的 get

  Nach der zusätzlichen Angabe von key wird die Strategie der „In-Place-Wiederverwendung“ nicht mehr verwendet, wodurch die Genauigkeit des Renderings sichergestellt werden kann. . 🎜

  🎜8. Warum die gemeinsame Verwendung von v-for und v-if nicht empfohlen wird🎜🎜

  • Wenn v-for und v-if Wenn im selben Knoten, v- for hat eine höhere Priorität als v-if, was bedeutet, dass v-if separat wiederholt wird Läuft in jeder v-for-Schleife. Wenn das zu durchlaufende Array sehr groß ist, die tatsächlich anzuzeigenden Daten jedoch sehr klein sind , was zu einer großen Leistungsverschwendung führt.
  • In diesem Szenario wird empfohlen, zuerst berechnet zu verwenden, um die Daten zu filtern.

  🎜9. Was ist der Unterschied zwischen dem Vue-Router-Hash-Modus und dem Verlaufsmodus? 🎜🎜🎜Unterschied: 🎜

  • 🎜URL-Anzeige, Hash-Modus hat „#“, Verlaufsmodus nicht 🎜
  • 🎜Aktualisieren⻚ Auf den ersten Blick kann das Hash-Muster normal in die Seite geladen werden, die dem Hash-Wert entspricht, während der Verlauf keinen Platz hat. Bei korrekter Handhabung wird 404 zurückgegeben. Im Allgemeinen muss das Backend so konfiguriert werden, dass alle Seiten auf die Homepage-Route umgeleitet werden. 🎜
  • 🎜Kompatibilität. Hash kann Browser niedrigerer Versionen und IE unterstützen🎜

  🎜10 Wie werden der Vue-Router-Hash-Modus und der Verlaufsmodus implementiert? 🎜🎜

  • Hash-Modus:

  🎜# Die Änderung des Hash-Werts führt nicht dazu, dass der Browser eine Anfrage an den Server und den Browser sendet wird keine Anfrage senden. Auf Wunsch wird die Seite nicht aktualisiert. Gleichzeitig können Sie durch Abhören des Hashchange-Ereignisses erkennen, welche Änderungen im Hash aufgetreten sind, und dann darauf basierend Hash-Änderungen, um den Vorgang der Aktualisierung eines Teils des Inhalts auf der Seite zu implementieren. 🎜

  • Verlaufsmodus:

  🎜Die Implementierung des Verlaufsmodus besteht hauptsächlich aus zwei vom HTML5-Standard veröffentlichten APIs, pushState und replaceState, diese beiden APIs können die URL ändern, senden aber keine Anfrage. Auf diese Weise können Sie überwachen Hören Sie sich URL-Änderungen an, um einen Teil des Inhalts auf der Seite zu aktualisieren. 🎜

  🎜11. Welche Änderungen gibt es in vue3.0 im Vergleich zu vue2.x? 🎜🎜

  • Änderungen im Überwachungsmechanismus (Object.defineProperty –> Proxy)
  • Vorlage
  • Komponentendeklarationsmethode (Klasse) im Objektstil
  Ts verwenden

• Weitere Änderungen: Unterstützung für benutzerdefinierte Renderer, Unterstützung für Fragment (mehrere Stammknoten) und Portal (in Andere Teile der Dom-Komponenten (Rendering und Erstellung von Inhalten), die auf Treeshaking-Optimierung basieren, bieten weitere integrierte Funktionen

🎜12 über MVVM? 🎜🎜

• MVVM ist die Abkürzung für Model-View-ViewModel, also MVC Der Controller entwickelte sich zum 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. 🎜Daten werden an die Ansichtsmodellebene gebunden und die Daten werden automatisch gerendert Die Seite wird benachrichtigt, wenn sich die Ansicht ändert Die ViewModel-Ebene aktualisiert Daten 🎜.

🎜13. Warum sind die Komponentendaten in vue eine Funktion, die ein Objekt zurückgibt, anstatt direkt ein Objekt zu sein? 🎜🎜

• Wenn Daten als Objekt definiert sind, bedeutet dies, dass 🎜alle Komponenteninstanzen eine Kopie der Daten gemeinsam nutzen🎜 Daher wirkt sich dies unabhängig davon, welche Komponenteninstanzdaten geändert werden, auf alle Komponenteninstanzen aus.
• Die Daten in der Komponente werden als Funktion geschrieben und die Daten werden in Form eines Funktionsrückgabewerts definiert, sodass jeder komplex ist Wenn eine Komponente einmal verwendet wird, wird eine neue Kopie der Daten zurückgegeben. Dies ähnelt der Erstellung eines „privaten Datenraums“ für jede Komponenteninstanz, sodass jede Komponenteninstanz ihre eigenen Daten verwalten kann. Wenn Sie es einfach in Objektform schreiben, ist es allen Komponenteninstanzen gemeinsam. Wenn Sie ein Datenelement kennen, wird es ein Ergebnis liefern, das alles verändert.

🎜14. Wie die Berechnung in Vue implementiert wird🎜🎜🎜🎜Der Prozess wird wie folgt zusammengefasst:🎜🎜🎜1 Wenn die Komponente initialisiert wird , computed und data werden jeweils erstellt Eigenes Antwortsystem, Observer durchläuft jede Attributeinstellung in data get/set Datenabfangen🎜🎜2. Die Initialisierung berechnet ruft die Funktion initComputed auf🎜

• 🎜Registrieren Sie einen watcher-Instanz und instanziieren darin eine Dep-Nachricht Der Informationsabonnent wird als nachfolgende Sammlungsabhängigkeit verwendet (z. B. als Watcher der Rendering-Funktion oder anderer beobachteter berechneter Eigenschaften). watcher geändert🎜
• 🎜Beim Aufruf einer berechneten Eigenschaft wird deren Object.defineProperty ausgelöst get Zugriffsfunktion🎜

• Aufrufen der Methode watcher.depend() für Ihren eigenen Nachrichtenabonnenten Fügen Sie watcher in den subs von dep weitere Attribute hinzu > /code> Methode (zum Aufrufen Die get-Methode von watcher macht sich selbst zum Abonnenten der Nachrichtenabonnenten anderer watcher. Legen Sie zunächst watcher fest code> wird dann Dep.target zugewiesen Nach der Ausführung der Getter-Auswertungsfunktion beim Zugriff auf die Eigenschaften in der Auswertungsfunktion (z. B. Tathagata Self data , props oder andere berechnete ), Ihre get-Accessorfunktionen werden ebenfalls ausgelöst, wodurch der watcher der berechneten Eigenschaft zum Nachrichtenabonnement des watcher der Eigenschaft in der Evaluatorfunktion hinzugefügt wird dep, wenn diese Der Vorgang ist abgeschlossen. Schließen Sie schließlich Dep.target und weisen Sie es null zu Gibt das Ergebnis der Auswertungsfunktion zurück. watcher.depend() ⽅法向⾃身的消息订阅器 dep 的 subs 中添加其他属性的watcher

• 调⽤ watcher 的 evaluate ⽅法（进⽽调⽤ watcher 的 get ⽅法）让⾃身成为其他watcher 的消息订阅器的订阅者，⾸先将 watcher 赋给 Dep.target ，然 后执⾏ getter求值函数，当访问求值函数⾥⾯的属性（⽐如来⾃ data 、 props 或其他 computed ）时， 会同样触发它们的 get 访问器函数从⽽将该计算属性的 watcher 添加到求值函数中属性的watcher 的消息订阅器 dep 中，当这些 操作完成，最后关闭 Dep.target 赋为 null 并 返回求值函数结果。

3、当某个属性发⽣变化，触发 set 拦截函数，然后调⽤⾃身消息订阅器 dep 的 notify ⽅法，遍 历当前 dep 中保存着所有订阅者 wathcer 的 subs 数组，并逐个 调⽤ watcher 的 update ⽅ 法，完成响应更新。

15. Vue 的响应式原理

如果⾯试被问到这个问题，⼜描述不清楚，可以直接画出 Vue 官⽅⽂档的这个图，对着图来 解释效果会更好。

• Vue 的响应式是通过 Object.defineProperty 对数据进⾏劫持，并结合观察者模式实现。
• Vue 利⽤Object.defineProperty 创建⼀个 observe 来 劫持监听所有的属性，把这些属性全部转为 getter和 setter 。
• Vue 中每个组件实例都会对应⼀个 watcher 实例，它会在组件渲染的过 程中把使⽤过的 数据属性通过 getter 收集为依赖。之后当依赖项的 setter 触发 时，会通知 watcher ，从⽽使它关联的组件重新渲染。

16. Object.defineProperty有哪些缺点？

• Object.defineProperty 只能劫持对象的属性，⽽ Proxy 是直接代理对象由于 Object.defineProperty 只能对属性进⾏劫持，需要遍历对象的每个属性。⽽ Proxy 可以直接代理对象。

• Object.defineProperty 对新增属性需要⼿动进⾏ Observe ， 由于Object.defineProperty 劫持的是对象的属性， 所以新增属性时，需要重新遍历对象，对其新 增属性再使⽤ Object.defineProperty 进⾏劫持。 也正是因为这个原因，使⽤ Vue 给 data中的数组或对象新增属性时，需要使⽤ vm.$set才能 保证新增的属性也是响应式的。

• Proxy ⽀持13种拦截操作，这是 defineProperty 所不具有的。

• 新标准性能红利Proxy 作为新标准，⻓远来看，JS引擎会继续优化 Proxy ，但 getter 和 setter 基本不会再有针对 性优化。

• Proxy 兼容性差 ⽬前并没有⼀个完整⽀持 Proxy 所 有拦截⽅法的Polyfill⽅案

17. Vue2.0中如何检测数组变化？

Vue 的 Observer 对数组做了单独的处理，对数组的⽅法进⾏编译，并赋值给 数组属性的 __proto__属性上，因为原型链的机制，找到对应 的⽅法就不会继续往上找了。编译⽅法中会对⼀些会增加索引的⽅法（ push ， unshift ， splice

3. Wenn sich ein bestimmtes Attribut ändert, lösen Sie die Abfangfunktion set aus und rufen Sie dann den eigenen Nachrichtenabonnenten auf deps notify-Methode, vorbei Das subs-Array aller Abonnenten wathcer wird einzeln in der aktuellen Dep gespeichert Rufen Sie die update-Methode von watcher auf Methode zum Abschließen der Antwortaktualisierung.

15. Das Reaktionsfähigkeitsprinzip von Vue

Wenn Ihnen diese Frage gestellt wird und die Beschreibung nicht klar ist, können Sie dieses Bild direkt aus dem offiziellen Dokument von Vue ziehen Bild Eine Erklärung wäre besser. 🎜🎜🎜

🎜Vues Reaktionsfähigkeit wird durch 🎜Entführung🎜 der Daten durch Object.defineProperty und Kombination mit dem 🎜Observer-Muster🎜 erreicht. 🎜🎜Vue verwendet Object.defineProperty, um eine observe zu erstellen Entführen Sie alle Eigenschaften und konvertieren Sie sie in getter und setter. 🎜🎜Jede Komponenteninstanz in Vue entspricht einer Watcher-Instanz, die während des Komponentenrenderings angezeigt wird. Während des Prozesses wird das verwendete Dateneigenschaften werden als Abhängigkeiten über Getter erfasst. Dann, wenn der setter der Abhängigkeit ausgelöst wird , watcher wird benachrichtigt, was dazu führt, dass die zugehörige Komponente erneut gerendert wird. 🎜

🎜16 Was sind die Nachteile von Object.defineProperty? 🎜🎜

🎜🎜Object.defineProperty kann nur die Eigenschaften von 🎜Objekten🎜 kapern, ⽽ Proxy ist direkt 🎜Proxy-Objekt 🎜Aufgrund Object.defineProperty kann nur Eigenschaften kapern und muss jede Eigenschaft des Objekts durchlaufen. Und Proxy kann Objekte direkt vertreten. 🎜🎜🎜🎜Object.defineProperty Neue Eigenschaften müssen manuell hinzugefügt werden Beobachten, da Object.defineProperty die Eigenschaften des Objekts kapert, Daher müssen Sie beim Hinzufügen von Attributen das Objekt erneut durchlaufen und ihm neue Attribute hinzufügen. Fügen Sie Eigenschaften hinzu und verwenden Sie dann Object.defineProperty für die Übernahme. Aus diesem Grund ist die Verwendung von Wenn Vue dem Array oder Objekt in data Attribute hinzufügt, müssen Sie vm.$set verwenden. Stellen Sie sicher, dass auch neu hinzugefügte Attribute reagieren. 🎜🎜🎜🎜Proxy ⽀Unterstützt 🎜13 Arten von Abhöroperationen🎜 Was defineProperty nicht hat. 🎜🎜🎜🎜Neuer Standard-Performance-Bonus-Proxy Als neuer Standard wird die JS-Engine langfristig weiter optimiert Proxy, aber getter und setter werden grundsätzlich nicht mehr als Ziel verwendet Sexuelle Optimierung. 🎜🎜🎜🎜Proxy weist eine schlechte Kompatibilität auf. Derzeit gibt es keine vollständige Unterstützung für Proxy. Polyfill-Lösung mit Abfangmethode🎜🎜

🎜17 Wie erkennt man Array-Änderungen in Vue2.0? 🎜🎜🎜Vues Observer führt eine separate Verarbeitung des Arrays durch, kompiliert die Array-Methode und weist sie zu Auf dem Attribut __proto__ des Array-Attributs wird aufgrund des Mechanismus der 🎜Prototypenkette🎜 das entsprechende Ich werde nicht weiter nach der Methode suchen. Die Kompilierungsmethode umfasst einige Methoden, die den Index erhöhen (push, unshift, splice) zur manuellen Beobachtung. 🎜🎜🎜18. Was macht nextTick? 🎜🎜🎜Die Voraussetzung für die klare Beantwortung dieser Frage ist, den EventLoop-Prozess zu verstehen. 🎜

• Führen Sie nach dem nächsten DOM-Aktualisierungszyklus einen verzögerten Rückruf aus und verwenden Sie nextTick, um ihn sofort nach der Änderung der Daten abzurufen Das aktualisierte DOM.
• nextTick Bei der Implementierung von Mikroaufgaben wird zunächst geprüft, ob diese unterstützt werden Promise: Wenn es nicht unterstützt wird, verweist es direkt auf die Makroaufgabe und überprüft zuerst die Implementierung der Makroaufgabe. Testen Sie, ob es setImmediate unterstützt (unterstützt von höheren Versionen von IE und Etage). Wenn es nicht unterstützt wird, prüfen Sie, ob es unterstützt wird. MessageChannel wird immer noch nicht unterstützt, es wird schließlich auf setTimeout 0 herabgestuft. nextTick 对于 micro task 的实现，会先检测是否⽀持 Promise ，不⽀持的话，直接指向 macrotask，⽽ macro task 的实现，优先检 测是否⽀持 setImmediate （⾼版本IE和Etage⽀持），不⽀持的再去检测是否⽀ 持 MessageChannel，如果仍不⽀持，最终降级为 setTimeout 0；
• 默认的情况，会先以 micro task ⽅式执⾏，因为 micro task 可以在⼀次 tick 中全 部执⾏完毕，在⼀些有重绘和动画的场景有更好的性能。
• 但是由于 micro task 优先级较⾼，在某些情况下，可能会在事件冒泡过程中触发，导 致⼀些问题，所以有些地⽅会强制使⽤ macro task （如 v-on ）。

注意：之所以将 nextTick 的回调函数放⼊到数组中⼀次 性执⾏，⽽不是直接在 nextTick 中执⾏回调函数，是为了保证在同⼀个tick内多 次执⾏了 nextTcik ，不会开启多个异步任务，⽽是把这些异步任务都压成⼀个同 步任务，在下⼀个tick内执⾏完毕。

19. Vue 的模板编译原理

vue模板的编译过程分为3个阶段：

• 第⼀步：解析

将模板字符串解析⽣成 AST，⽣成的AST 元素节点总共有 3 种类型，1 为普通元素， 2 为 表达式，3为纯⽂本。

• 第⼆步：优化语法树

Vue 模板中并不是所有数据都是响应式的，有很多数据是⾸次渲染后就永远不会变化的，那么 这部分数据⽣成的 DOM 也不会变化，我们可以在 patch 的过程跳过对他们的⽐对。

此阶段会深度遍历⽣成的 AST 树，检测它的每⼀颗⼦树是不是静态节点，如果是静态节点则 它们⽣成DOM 永远不需要改变，这对运⾏时对模板的更新起到极⼤的优化作⽤。

1、⽣成代码

const code = generate(ast, options)

通过 generate ⽅法，将ast⽣成 render 函数。

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

Vue3.x改⽤ Proxy

Standardmäßig wird es zuerst als Mikroaufgabe ausgeführt, da die Mikroaufgabe abgeschlossen werden kann ein Häkchen. Die Implementierung ist abgeschlossen und in einigen Szenen wurde durch Neuzeichnung und Animation eine bessere Leistung erzielt.

Aufgrund der hohen Priorität von Mikroaufgaben kann es jedoch in einigen Fällen dazu kommen, dass sie während des Ereignis-Bubbling-Prozesses ausgelöst werden, was dazu führt Verursacht einige Probleme, sodass an manchen Stellen die Verwendung einer Makroaufgabe erzwungen wird (z. B. v-on).

Hinweis

: Der Grund, warum die Callback-Funktion von nextTick einmal in das Array eingefügt wird Anstatt die Callback-Funktion direkt in nextTick auszuführen, soll sichergestellt werden, dass mehrere Aufrufe innerhalb desselben Ticks ausgeführt werden können. Wenn nextTcik zum ersten Mal ausgeführt wird, werden nicht mehrere asynchrone Aufgaben gestartet, sondern diese asynchronen Aufgaben werden zu einer gleichzeitigen Aufgabe komprimiert. Die Schrittaufgabe wird innerhalb des nächsten Ticks ausgeführt.

19. Prinzip der Vue-Vorlagenkompilierung

Der Kompilierungsprozess der Vue-Vorlage ist in drei Phasen unterteilt:

Schritt ⼀: Analysieren

Konvertieren Sie die Vorlagenzeichenfolge und AST generieren. Die generierten AST-Elementknoten haben insgesamt 3 Typen, 1 ist ein gewöhnliches Element und 2 ist es Ausdruck 3 ist Klartext.

Schritt 2: Optimieren Sie den Syntaxbaum
• Nicht alle Daten in der Vue-Vorlage sind responsiv. Es gibt also viele Daten, die sich nach dem ersten Rendern nie ändern werden Das von diesem Teil der Daten generierte DOM ändert sich nicht und wir können den Vergleich während des Patch-Vorgangs überspringen.
• In dieser Phase wird der generierte AST-Baum gründlich durchsucht, um festzustellen, ob jeder seiner Unterbäume ein statischer Knoten ist Das von ihnen generierte DOM muss nie geändert werden, was die Vorlagenaktualisierungen zur Laufzeit erheblich optimiert.
• 1. Code generieren
rrreee
• Verwenden Sie die Methode „Generieren“, um ast in die Renderfunktion umzuwandeln.
• 20 Kennen Sie das Prinzip der responsiven Daten von Vue3.x?
• Vue3.x wurde in Proxy anstelle von Object.defineProperty geändert. Weil Proxy das direkt überwachen kann Es gibt Änderungen an Objekten und Arrays und es gibt bis zu 13 Abfangmethoden. Und als neuer Standard wird er einer kontinuierlichen Leistungsoptimierung durch Browserhersteller unterliegen. ändern.
• Proxy fungiert nur als Proxy für die erste Ebene des Objekts. Wie geht Vue3 mit diesem Problem um?
• Bestimmen Sie, ob der aktuelle Rückgabewert von Reflect.get Object ist. Wenn ja, verwenden Sie die reaktive Methode als Proxy Auf diese Weise wird eine tiefe Beobachtung erreicht.

Beim Überwachen eines Arrays kann Get/Set mehrmals ausgelöst werden. Wie kann man also mehrere Auslöser verhindern?

Wir können feststellen, ob der Schlüssel die Zieleigenschaft des aktuellen Proxy-Objekts ist, und wir können auch feststellen, ob der alte Wert und der neue Wert gleich sind. Nur wenn eine der beiden oben genannten Bedingungen erfüllt ist, ist die Ausführung des Triggers möglich.

• 21. Welche Leistungsoptimierungen haben Sie für Vue vorgenommen?

Codierungsphase

Versuchen Sie, die Daten in den Daten zu reduzieren, und fügen Sie Getter und Setter hinzu, und die entsprechenden Beobachter werden erfasst.

• v-if und v-for können nicht zusammen verwendet werden
• Verwenden Sie bei Bedarf ⽤v -für die Verwendung eines Ereignis-Proxys beim Binden von Ereignissen an jedes Element
• SPA ⻚⾯ übernimmt die Keep-Alive-Caching-Komponente
• In häufigeren Fällen verwenden Sie v-if anstelle von v-show
• key, um sicherzustellen Einzigartigkeit
• Verwenden Sie ⽤ Lazy Loading von Routen, asynchronen Komponenten

Anti-Shake, Throttling

Importieren Sie Module von Drittanbietern bei Bedarf

⻓ Scrollen Sie durch die Liste in den sichtbaren Bereich und laden Sie dynamisch

• Lazy Loading von Bildern

SEO-Optimierung

Pre-RenderingServerseitiges Rendering SSR

🎜🎜Packaging-Optimierung🎜🎜🎜🎜Komprimierungscode🎜🎜Tree Shaking/Scope Hoisting🎜🎜führt dazu, dass ⽤cdn den dritten lädt ⽅module🎜🎜Multi- Threaded Packaging Happypack🎜🎜SplitChunks aus dem öffentlichen Text extrahiert 🎜🎜SourceMap-Optimierung🎜🎜🎜🎜Benutzererfahrung🎜🎜🎜🎜Skelettbildschirm🎜🎜PWA🎜🎜🎜Sie können auch die Cache-Optimierung (Client-Cache, Server-Cache) verwenden und die GZIP-Komprimierung aktivieren auf dem Server usw. 🎜🎜 (Teilen von Lernvideos: 🎜Web-Frontend-Entwicklung🎜, 🎜Einfaches Programmiervideo🎜)🎜

Das obige ist der detaillierte Inhalt von[Zusammenstellen und teilen] Einige hochfrequente Interviewfragen von Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!