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!
![[Zusammenstellen und teilen] Einige hochfrequente Interviewfragen von Vue](https://img.php.cn/upload/article/000/000/024/630754b49079d102.jpg)
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?
2. v-model是如何实现双向绑定的？
3. Vuex和单纯的全局对象有什么区别？
Vuex和全局对象主要有两种区别：
4. Vue 的⽗组件和⼦组件⽣命周期钩⼦执⾏顺序是什么？
渲染过程：⽗组件挂载完成⼀定是等⼦组件都挂载完成后，才算是⽗组件
挂载完，所以⽗组件的mounted在⼦组件mouted之后
⽗beforeCreate -> ⽗created -> ⽗beforeMount -> ⼦beforeCreate ->
⼦created -> ⼦beforeMount
-> ⼦mounted -> ⽗mounted
⼦组件更新过程：
- 影响到⽗组件： ⽗beforeUpdate -> ⼦beforeUpdate->⼦updated -> ⽗
updted
- 不影响⽗组件： ⼦beforeUpdate -> ⼦updated
⽗组件更新过程：
- 影响到⼦组件： ⽗beforeUpdate -> ⼦beforeUpdate->⼦updated -> ⽗
updted
- 不影响⼦组件： ⽗beforeUpdate -> ⽗updated
销毁过程：⽗beforeDestroy -> ⼦beforeDestroy -> ⼦
destroyed -> ⽗destroyed
看起来很多好像很难记忆，其实只要理解了，不管是哪种情况，都⼀定是⽗组件等待⼦组件完
成后，才会执⾏⾃⼰对应完成的钩⼦，就可以很容易记住
5. v-show 和 v-if 有哪些区别？
所以， 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
broadcast2. Wie implementiert das V-Modell die bidirektionale Bindung?
vue 2.0
v-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 模式有什么区别？
区别：
10. vue-router hash 模式和 history 模式是如何实现的？
# 后⾯ hash 值的变化，不会导致浏览器向服务器发出请求，浏览器不发出请
求，就不会刷新⻚⾯。同时通过监听 hashchange 事件可以知道 hash 发⽣了哪些变化，然后根据
hash 变化来实现更新⻚⾯部分内容的操作。
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 函数
🎜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 官⽅⽂档的这个图，对着图来
解释效果会更好。
![[Zusammenstellen und teilen] Einige hochfrequente Interviewfragen von Vue](https://img.php.cn/upload/image/189/164/660/1661425121251524.png "1661425121251524.png")
- 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)
Nach dem Login kopieren
通过 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
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!
