[Hämatemesis] Zusammenfassung der Interviewfragen von Vue.js und Analyse der Antworten (kommen Sie und holen Sie sie ab)

Dieser Artikel fasst einige Vue-Interviewfragen zusammen (mit Antwortanalyse), um Ihnen dabei zu helfen, das Grundwissen zu sortieren und Ihren Vue-Wissensvorrat zu erweitern. Es lohnt sich, sie zu sammeln, kommen Sie vorbei und werfen Sie einen Blick darauf!

(Lernvideo-Sharing: vue-Video-Tutorial)

1. Grundlegende Probleme von Vue.js

1.1. Vue-Responsive-Prinzip

Kernimplementierungsklassen:

Beobachter: Seine Rolle besteht darin, den Eigenschaften des Objekts Getter und Setter für die Sammlung von Abhängigkeiten und den Versand von Aktualisierungen hinzuzufügen. Dep: Wird zum Sammeln der Abhängigkeiten des aktuellen reaktionsfähigen Objekts, einschließlich Unterobjekten, verwendet. (subs darin ist ein Array von Watcher-Instanzen). Wenn sich die Daten ändern, wird jeder Watcher über dep.notify() benachrichtigt. Watcher: Beobachterobjekt, die Instanz ist in drei Typen unterteilt: Rendering-Watcher (Render-Watcher), berechneter Attribut-Watcher (berechneter Watcher), Listener-Watcher (Benutzer-Watcher)
Die Beziehung zwischen Watcher und Dep:

Watcher ist instanziierter Dep und fügte Abonnenten zu dep.subs hinzu, dep durchquerte dep.subs über notify, um jedes Watcher-Update zu benachrichtigen.
Abhängigkeitssammlung:
Wenn initState verwendet wird und das berechnete Attribut initialisiert wird, wird die berechnete Watcher-Abhängigkeitssammlung ausgelöst.
Wenn initState verwendet wird, wird die Benutzer-Watcher-Abhängigkeitssammlung ausgelöst Der render()-Prozess löst die Render-Watcher-Abhängigkeitssammlung aus. Beim erneuten Rendern wird vm.render() erneut ausgeführt und die Abonnements des Watchers in allen Subs werden entfernt und neu zugewiesen.
Aktualisierungen verteilen:

Die Antwortdaten werden in der Komponente geändert, wodurch die Setter-Logik ausgelöst wird.
Rufen Sie dep.notify() auf.
Durchlaufen Sie alle Subs (Watcher-Instanzen) und rufen Sie die Aktualisierungsmethode jedes Watchers auf. Prinzip:

Beim Erstellen einer Vue-Instanz durchläuft Vue die Eigenschaften der Datenoption und verwendet Object.defineProperty, um Getter und Setter zu den Eigenschaften hinzuzufügen, um das Lesen von Daten zu kapern (Getter werden verwendet, um sich auf die Sammlung zu verlassen, und Setter werden verwendet, um Aktualisierungen zu versenden) und Abhängigkeiten intern zu verfolgen und Änderungen zu benachrichtigen, wenn auf Eigenschaften zugegriffen und diese geändert werden.
Jede Komponenteninstanz verfügt über eine entsprechende Watcher-Instanz, die alle Datenattribute der Abhängigkeit während des Komponenten-Rendering-Prozesses aufzeichnet (Abhängigkeitssammlung, berechneter Watcher, Benutzer-Watcher-Instanzen). Wenn die Abhängigkeit später geändert wird, wird die Setter-Methode benachrichtigt die Watcher-Instanz, die von diesen Daten abhängt, um sie neu zu berechnen (Updates zu versenden) und dadurch die zugehörige Komponente neu zu rendern.
Zusammenfassung in einem Satz:
vue.js verwendet Daten-Hijacking in Kombination mit dem Publish-Subscribe-Modell und verwendet Object.defineproperty, um
die Setter und Getter jeder Eigenschaft zu kapern, Nachrichten an Abonnenten zu veröffentlichen, wenn sich die Daten ändern, und auszulösen die Antwortüberwachungsrückrufe

1.2. Funktionen von Vue.js

Einfach zu verwenden: Einfach, leicht zu erlernen, schnell zu starten Flexibel: (Progressiv) Ein wachsendes Ökosystem, das frei zwischen einer Bibliothek skalieren kann und ein komplettes Framework. Effizient: 20 KB Min. + gzip-Laufgröße; ultraschnelle virtuelle DOM; problemloseste Optimierung

Zwei-Wege-Bindung: hohe Entwicklungseffizienz

Komponentenbasierte Codefreigabe

Web-Projektentwicklung, bessere Lesbarkeit und Wartbarkeit

1.3 . Das Prinzip der bidirektionalen Bindung von Vue.js

Vue.js 2.0 verwendet Daten-Hijacking (Proxy-Modus) in Kombination mit dem Publisher-Subscriber-Modus (PubSub-Modus), um jedes einzelne Objekt über Object.defineProperty() zu kapern und Getter veröffentlichen Nachrichten an Abonnenten, wenn sich Daten ändern, und lösen entsprechende Abhörrückrufe aus.

Jede Komponenteninstanz verfügt über eine entsprechende Watcher-Programminstanz. Sie zeichnet die Eigenschaften als Abhängigkeiten während des Rendervorgangs der Komponente auf. Wenn der Setter der Abhängigkeit später aufgerufen wird, wird der Watcher zur Neuberechnung aufgefordert, was dazu führt, dass die zugehörigen Komponenten neu berechnet werden erneuert werden.

Vue.js 3.0, Object.defineProperty aufgegeben und den schnelleren nativen ES6-Proxy (Access Object Interceptor, auch Proxy genannt) verwendet

Schritte:

1. Das zu beobachtende Datenobjekt wird rekursiv durchlaufen, einschließlich der Attribute des Unterattributobjekts, und wenn diesem Objekt ein Wert zugewiesen wird, wird der Setter ausgelöst Die Datenänderungen können überwacht werden.
2. Kompilieren analysiert die Vorlagenanweisungen, ersetzt die Variablen in der Vorlage durch Daten, initialisiert dann die Rendering-Seitenansicht, bindet die Aktualisierungsfunktion an den Knoten, der jeder Anweisung entspricht, und fügt Abonnenten zur Überwachung hinzu Sobald sich die Daten ändern, werden sie benachrichtigt und die Ansicht aktualisiert.
3. Der Watcher-Abonnent ist die Kommunikationsbrücke zwischen Observer und Compile. Die wichtigsten Aufgaben sind: ① Fügt sich selbst zum Attribut-Abonnenten (dep) hinzu instanziiert ② Es muss eine update()-Methode haben ③ Wenn Sie von dep.notice() über Attributänderungen benachrichtigt werden, können Sie Ihre eigene update()-Methode aufrufen und den in Compile gebundenen Callback auslösen, dann sind Sie fertig.
4. Als Eingang zur Datenbindung integriert MVVM Observer, Compile und Watcher. Es verwendet Observer, um Änderungen in seinen eigenen Modelldaten zu überwachen, verwendet Compile, um Vorlagenanweisungen zu analysieren und zu kompilieren, und verwendet schließlich Watcher, um die Kommunikation zwischen Observer und einzurichten Kompilieren Sie, um den bidirektionalen Bindungseffekt der Datenänderung zu erzielen -> Aktualisierung anzeigen; interaktive Änderung anzeigen (Eingabe) -> Datenmodelländerung.

1.4. Wie kann man die Änderung eines bestimmten Attributwerts in Vue überwachen?

Zum Beispiel müssen wir jetzt die Änderungen in obj.a in den Daten überwachen. Sie können Änderungen an Objektattributen in Vue wie folgt überwachen:

watch: {
      obj: {
      	handler (newValue, oldValue) {
        console.log('obj changed')
      },
      deep: true
    }

Das tiefe Attribut stellt eine tiefe Durchquerung dar, aber wenn Sie auf diese Weise schreiben, werden alle Attributänderungen von obj überwacht, was nicht der gewünschte Effekt ist, also nehmen Sie einige Änderungen vor:

watch: {
   'obj.a': {
      	handler (newName, oldName) {
        console.log('obj.a changed')
      }
   }
  }

Es gibt eine andere Möglichkeit, die Methode durch Berechnung zu implementieren, was nur Folgendes erfordert:

computed: {
    a1 () {
      return this.obj.a    
      }
}

Unter Verwendung der Eigenschaften berechneter Eigenschaften wird bei Änderung der Abhängigkeit ein neuer Wert neu berechnet.

1.5. Vue.js 3.0 verzichtet auf defineProperty und verwendet Proxy-Gründe

Object.defineProperty-Defekte

1. Die Überwachung von Änderungen in Array-Indizes ist sehr teuer. Daher hat Vue.js die Erkennung von Indexänderungen aufgegeben.
2.Object.defineProperty kann nur die Eigenschaften des Objekts kapern, während Proxy ein direktes Proxy-Objekt ist. 3.Object.defineProperty muss jede Eigenschaft des Objekts durchlaufen. Wenn der Eigenschaftswert auch ein Objekt ist, ist eine tiefe Durchquerung erforderlich. Der Proxy stellt Objekte direkt als Proxy her und erfordert keine Durchlaufvorgänge.
4. Object.defineProperty erfordert die manuelle Beobachtung neuer Eigenschaften. vue2 muss vm.$set verwenden, um sicherzustellen, dass die neuen Eigenschaften auch reagieren. 5. Proxy unterstützt 13 Arten von Abfangoperationen, die bei defineProperty nicht verfügbar sind. 6. Proxy ist auf lange Sicht ein neuer Standard wird weiterhin optimiert, aber Getter und Setter werden grundsätzlich nicht mehr gezielt optimiert

1.6 Was passiert, wenn in Vue 2 ein neues Attribut zum Objektattribut hinzugefügt wird? Wie kann man es lösen?

Die Ansicht wird nicht aktualisiert. Dies liegt daran, dass beim Erstellen der Vue-Instanz die neuen Eigenschaften nicht deklariert werden, sodass sie von Vue nicht in reaktionsfähige Eigenschaften umgewandelt werden und die Aktualisierung der Ansicht natürlich nicht ausgelöst wird. In diesem Fall müssen Sie Vues Global verwenden api $set():

this.$set(this.obj, 'new_property', 'new_value')

1.7 Der Unterschied zwischen Computed und Watch und ihren Anwendungsszenarien

computed attribute:

hängt von anderen Attributwerten ab und der berechnete Wert wird nur vom Attributwert zwischengespeichert Bei Änderungen wird der berechnete Wert beim nächsten Mal erhalten. Der berechnete Wert wird nur dann neu berechnet, wenn der Wert erreicht ist. Watch-Listener:
Es handelt sich eher um eine Beobachtungsfunktion ohne Zwischenspeicherung, ähnlich dem Überwachungsrückruf bestimmter Daten. Immer wenn sich die überwachten Daten ändern, wird der Rückruf für nachfolgende Vorgänge ausgeführt.

Anwendungsszenarien:

1. Wenn wir numerische Berechnungen durchführen müssen und auf andere Daten angewiesen sind, sollte „Computed“ verwendet werden, da die Cache-Funktion von „Computed“ verwendet werden kann, um eine Neuberechnung jedes Mal zu vermeiden, wenn der Wert abgerufen wird.

2. Wenn wir asynchrone oder teure Vorgänge ausführen müssen, wenn sich die Daten ändern, sollten wir watch verwenden. Durch die Verwendung der watch-Option können wir asynchrone Vorgänge ausführen (auf eine API zugreifen) und die Häufigkeit und den Zeitpunkt begrenzen, mit der wir den Vorgang ausführen Wir bekommen Bevor wir das Endergebnis erhalten, legen wir den Zwischenzustand fest. Dies sind Dinge, die berechnete Eigenschaften nicht leisten können.

3. Wenn sich mehrere Faktoren auf eine Anzeige auswirken, verwenden Sie Berechnet; wenn sich eine Änderung eines Faktors auf mehrere andere Faktoren und Anzeigen auswirkt, verwenden Sie Beobachten

1. Berechnet: Berechnet Attribute werden basierend auf ihren Abhängigkeiten zwischengespeichert und nur dann neu ausgewertet, wenn sich ihre zugehörigen Abhängigkeiten ändern. Solange eine Neudarstellung erfolgt, führen

2. Methodenaufrufe diese Funktion immer aus

1.9. Virtuelles DOM, Diff-Algorithmus

1. Lassen Sie uns DOM-Elemente nicht direkt bedienen, sondern nur die Daten bearbeiten, um die Seite neu zu rendern. 2. Virtuelles DOM dient dazu, Probleme mit der Browserleistung zu lösen Daten werden die geänderten Dom-Elemente zwischengespeichert und nach der Berechnung durch Vergleich dem realen Dom-Baum zugeordnet.
3. Der Diff-Algorithmus vergleicht den alten und neuen virtuellen Dom. Wenn die Knotentypen gleich sind, vergleichen Sie die Daten und ändern Sie sie. Wenn die Knoten unterschiedlich sind, löschen Sie den Knoten und alle untergeordneten Knoten direkt und fügen Sie einen neuen Knoten ein Finden Sie heraus, was geändert werden muss. Andernfalls kann es passieren, dass die Änderung an einer Stelle Änderungen an anderen Stellen zur Folge hat. Wenn ich beispielsweise A-B-C-D einen neuen Knoten A-B-M-C-D einfügen möchte, werden C und D tatsächlich geändert. Aber nachdem Sie den Schlüssel festgelegt haben, können Sie B C genau finden und einfügen.

1.10 Warum benötigen Sie Virtual DOM?

1. Es hat plattformübergreifende Vorteile

2. Der Betrieb von DOM ist langsam, aber js läuft effizient. Wir können die DOM-Vergleichsoperation auf der JS-Ebene platzieren, um die Effizienz zu verbessern.

3. Verbessern Sie die Rendering-Leistung

Filter

Filter ändern nicht die Daten, sondern filtern (formatieren) die angezeigte Ausgabe Der Benutzer (berechnete Attribute, Methoden usw.) verarbeitet die Ausgabeanzeige des Datenformats, indem er die Daten ändert.

Verwendungsszenarien: Zum Beispiel Anzeigeformate, die Zeit, Zahlen usw. verarbeiten müssen.

1.12 . Allgemeine Ereignismodifikatoren und ihre Funktionen

1).stop: Entspricht event.stopPropagation() in JavaScript und verhindert, dass Ereignisse sprudeln;

2).prevent : Entspricht event.preventDefault() in JavaScript und verhindert die Ausführung des voreingestellten Verhaltens (wenn das Ereignis abgebrochen werden kann, brechen Sie das Ereignis ab, ohne die weitere Ausbreitung des Ereignisses zu stoppen);

3) .capture: Wenn ein Element sprudelt, wird das Element mit diesem Modifikator zuerst ausgelöst. Wenn mehrere Modifikatoren vorhanden sind, werden diese von außen nach innen ausgelöst. Wenn beispielsweise p1 in p2 verschachtelt ist, ist p3 in p4 verschachtelt. Capture ist in p4 verschachtelt, dann lautet die Ausführungsreihenfolge: p3=》p4=》p2=》p1.stop：等同于 JavaScript 中的 event.stopPropagation() ，防止事件冒泡；
2).prevent ：等同于 JavaScript 中的 event.preventDefault() ，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）；
3).capture ：当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。如 p1中嵌套p2中嵌套p3.capture中嵌套p4，那么执行顺序为：p3=》p4=》p2=》p1
4).self ：只会触发自己范围内的事件，不包含子元素；
5).once ：只会触发一次。

1.13.v-show指令和v-if指令的区别是什么？

v-show 仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回切换；而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。

1.14.v-model 是如何实现的，语法糖实际是什么

作用在表单元素上v-model="message"等同于v-bind:value=“message” v-on:input="message=e v e n t . t a r g e t . v a l u e " 作 用 在 组 件 上 , 本 质 是 一 个 父 子 组 件 通 信 的 语 法 糖 ，通过prop和.emit实现, 等同于：value="message" @input=" $emit('input', $event.target.value)" 4).self : löst nur seinen eigenen Bereich aus. Ereignisse enthalten keine untergeordneten Elemente

5) .once: Es wird nur einmal ausgelöst.

1.13. Was ist der Unterschied zwischen dem v-show-Befehl und dem v-if-Befehl?

v-show

steuert nur den Anzeigemodus des Elements

und schaltet das Anzeigeattribut zwischen

block und none hin und her, während v-if die Existenz dieses DOM-Knotens

steuert. Wenn wir die Anzeige/Ausblendung eines Elements häufig umschalten müssen, spart die Verwendung von v-show mehr Leistungsaufwand; wenn wir es nur einmal ein- oder ausblenden müssen, ist die Verwendung von v-if sinnvoller.

1.14. Wie ist das V-Modell eigentlich?

wirkt sich auf Formularelemente aus: input ="message=e v e n t . t a r g e t . v a l u e " wirkt auf Komponenten. Es handelt sich im Wesentlichen um einen Syntaxzucker für die Kommunikation zwischen übergeordneten und untergeordneten Komponenten, der durch prop und .emit implementiert wird und dem entspricht: value="message" @input =" $emit( ​​'input', $event.target.value)"

1.15.Warum sind Daten eine Funktion und kein Objekt? Objekte in JavaScript sind Referenztypdaten, wenn mehrere Instanzen vorhanden sind beziehen sich auf dasselbe Objekt. Solange eine Instanz dieses Objekt bearbeitet, ändern sich auch die Daten in anderen Instanzen.

In Vue möchten wir Komponenten häufiger wiederverwenden, daher muss jede Komponente ihre eigenen Daten haben, damit die Komponenten sich nicht gegenseitig stören.

Daher können die Daten der Komponente nicht in Form von Objekten geschrieben werden, sondern müssen in Form von Funktionen geschrieben werden. Daten werden in Form von Funktionsrückgabewerten definiert, sodass bei jeder Wiederverwendung einer Komponente neue Daten zurückgegeben werden. Das heißt, jede Komponente verfügt über ihren eigenen privaten Datenraum und kann jeweils ihre eigenen Daten verwalten den normalen Betrieb anderer Komponenten beeinträchtigen.

🎜1.16. Der Prozess von der Vue-Vorlage zum Rendern🎜🎜🎜🎜1. Rufen Sie die Parse-Methode auf, um die Vorlage in ast (abstrakter Syntaxbaum) zu konvertieren. 🎜 2. Optimieren Sie die statischen Knoten. Wenn es sich um statische Knoten handelt, ändert sich das von ihnen generierte DOM nie, was die Aktualisierung von Laufzeitvorlagen erheblich optimiert. 🎜 3. Renderfunktion generieren ist VNode, der virtuelle DOM-Knoten, der (Labelname, untergeordneter Knoten, Text usw.) enthält. 🎜🎜🎜🎜1.17 Der Prozess von der Vue-Vorlage zum Rendern 🎜🎜 🎜Rufen Sie die Parse-Methode auf, um die Vorlage in ast (abstrakten Syntaxbaum) zu konvertieren. 🎜 Statische Knoten optimieren. Wenn es sich um statische Knoten handelt, ändert sich das von ihnen generierte DOM nie, was die Aktualisierung von Laufzeitvorlagen erheblich optimiert. 🎜 Generieren Sie eine Rendering-Funktion. VNode ist der virtuelle DOM-Knoten, der (Labelnamen, untergeordneten Knoten, Text usw.) enthält

1.18.axios是什么

易用、简洁且高效的http库， 支持node端和浏览器端，支持Promise，支持拦截器等高级配置。

1.19.sass是什么？如何在vue中安装和使用？

sass是一种CSS预编译语言安装和使用步骤如下。

1.用npm安装加载程序（ sass-loader、 css-loader等加载程序)。
2.在 webpack.config.js中配置sass加载程序。

1.20.Vue.js页面闪烁

Vue. js提供了一个v-cloak指令，该指令一直保持在元素上，直到关联实例结束编译。当和CSS一起使用时，这个指令可以隐藏未编译的标签，直到实例编译结束。用法如下

1.21.如何解决数据层级结构太深的问题

在开发业务时，经常会岀现异步获取数据的情况，有时数据层次比较深，如以下代码: , 可以使用vm.$set手动定义一层数据:

vm.$set("demo"，a.b.c.d)

1.22.在 Vue. js开发环境下调用API接口，如何避免跨域

config/ index.js内对 proxyTable项配置代理。

1.23.批量异步更新策略

Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。
换句话说，只要观察到数据变化，就会自动开启一个队列，并缓冲在同一个事件循环中发生的所以数据改变。在缓冲时会去除重复数据，从而避免不必要的计算和 DOM 操作。

1.24.vue 的 nextTick 方法的实现原理

1.vue 用异步队列的方式来控制 DOM 更新和 nextTick 回调先后执行
2.microtask 因为其高优先级特性，能确保队列中的微任务在一次事件循环前被执行完毕

1.25.Vue 组件 data 为什么必须是函数 ?

因为组件是可以复用的,JS 里对象是引用关系,如果组件 data 是一个对象,那么子组件中的 data 属性值会互相污染。
所以一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝。

1.26.v-if和v-for一起使用的弊端及解决办法

由于v-for的优先级比v-if高，所以导致每循环一次就会去v-if一次，而v-if是通过创建和销毁dom元素来控制元素的显示与隐藏，所以就会不停的去创建和销毁元素，造成页面卡顿，性能下降。

解决办法：

1.在v-for的外层或内层包裹一个元素来使用v-if
2.用computed处理

1.27.vue常用指令

1.v-model 多用于表单元素实现双向数据绑定（同angular中的ng-model）
2.v-bind 动态绑定 作用： 及时对页面的数据进行更改
3.v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面
4.v-for 格式： v-for=“字段名 in(of) 数组json” 循环数组或json(同angular中的ng-repeat)
5.v-show 显示内容 （同angular中的ng-show）
6.v-hide 隐藏内容（同angular中的ng-hide）
7.v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false）
8.v-else-if 必须和v-if连用
9.v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误
10.v-text 解析文本
11.v-html 解析html标签
12.v-bind:class 三种绑定方法 1、对象型 ‘{red:isred}’ 2、三元型 ‘isred?“red”:“blue”’ 3、数组型 ‘[{red:“isred”},{blue:“isblue”}]’
13.v-once 进入页面时 只渲染一次 不在进行渲染
14.v-cloak 防止闪烁
15.v-pre 把标签内部的元素原位输出

1.28. 组件传值方式有哪些

1.父传子：子组件通过props[‘xx’] 来接收父组件传递的属性 xx 的值
2.子传父：子组件通过 this.$emit(‘fnName’,value) 来传递,父组件通过接收 fnName 事件方法来接收回调
3.其他方式：通过创建一个bus，进行传值
4.使用Vuex

1.30.vue中 key 值的作用

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM

1.31.为什么在 Vue3.0 采用了 Proxy,抛弃了 Object.defineProperty？

Object.defineProperty 本身有一定的监控到数组下标变化的能力,但是在 Vue 中,从性能/体验的性价比考虑,尤大大就弃用了这个特性(Vue 为什么不能检测数组变动 )。为了解决这个问题,经过 vue 内部处理后可以使用以下几种方法来监听数组

push();
pop();
shift();
unshift();
splice();
sort();
reverse();

由于只针对了以上 7 种方法进行了 hack 处理,所以其他数组的属性也是检测不到的,还是具有一定的局限性。

Object.defineProperty 只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。Vue 2.x 里,是通过 递归 + 遍历 data 对象来实现对数据的监控的,如果属性值也是对象那么需要深度遍历,显然如果能劫持一个完整的对象是才是更好的选择。
Proxy 可以劫持整个对象,并返回一个新的对象。Proxy 不仅可以代理对象,还可以代理数组。还可以代理动态增加的属性。

1.32.谈一谈 nextTick 的原理

JS 运行机制

JS 执行是单线程的，它是基于事件循环的。事件循环大致分为以下几个步骤:

所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
主线程不断重复上面的第三步。

主线程的执行过程就是一个 tick，而所有的异步结果都是通过 “任务队列” 来调度。 消息队列中存放的是一个个的任务（task）。 规范中规定 task 分为两大类，分别是 macro task 和 micro task，并且每个 macro task 结束后，都要清空所有的 micro task。

for (macroTask of macroTaskQueue) {
  // 1. Handle current MACRO-TASK
  handleMacroTask();

  // 2. Handle all MICRO-TASK
  for (microTask of microTaskQueue) {
    handleMicroTask(microTask);
  }}

在浏览器环境中 :

常见的 macro task 有 setTimeout、MessageChannel、postMessage、setImmediate

常见的 micro task 有 MutationObsever 和 Promise.then

异步更新队列

可能你还没有注意到，Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。
如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。
然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。
Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。
在 vue2.5 的源码中，macrotask 降级的方案依次是：setImmediate、MessageChannel、setTimeout

vue 的 nextTick 方法的实现原理:

vue 用异步队列的方式来控制 DOM 更新和 nextTick 回调先后执行
microtask 因为其高优先级特性，能确保队列中的微任务在一次事件循环前被执行完毕
考虑兼容问题,vue 做了 microtask 向 macrotask 的降级方案

1.33.谈谈 Vue 事件机制,手写on,off,emit,once

Vue 事件机制 本质上就是 一个 发布-订阅 模式的实现。

class Vue {
  constructor() {
    //  事件通道调度中心
    this._events = Object.create(null);
  }
  $on(event, fn) {
    if (Array.isArray(event)) {
      event.map(item => {
        this.$on(item, fn);
      });
    } else {
      (this._events[event] || (this._events[event] = [])).push(fn);
    }
    return this;
  }
  $once(event, fn) {
    function on() {
      this.$off(event, on);
      fn.apply(this, arguments);
    }
    on.fn = fn;
    this.$on(event, on);
    return this;
  }
  $off(event, fn) {
    if (!arguments.length) {
      this._events = Object.create(null);
      return this;
    }
    if (Array.isArray(event)) {
      event.map(item => {
        this.$off(item, fn);
      });
      return this;
    }
    const cbs = this._events[event];
    if (!cbs) {
     return this;
    }
    if (!fn) {
      this._events[event] = null;
      return this;
    }
    let cb;
    let i = cbs.length;
    while (i--) {
      cb = cbs[i];
      if (cb === fn || cb.fn === fn) {
        cbs.splice(i, 1);
        break;
      }
    }
    return this;
  }
  $emit(event) {
    let cbs = this._events[event];
    if (cbs) {
      const args = [].slice.call(arguments, 1);
      cbs.map(item => {
        args ? item.apply(this, args) : item.call(this);
      });
    }
    return this;
  }}

1.34.vue-router有哪几种导航钩子？

三种:

一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。第二种：组件内的钩子；第三种：单独路由独享组件

1.35.vuex是什么？怎么使用？哪种功能场景使用它？

vue框架中状态管理。在main.js引入store，注入。新建了一个目录store，…… export 。
场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

1.36. Was ist der Unterschied zwischen MVVM und MVC? Wie unterscheidet es sich von anderen Frameworks (jquery)? Welche Szenarien gelten?

MVVM und MVC sind beide Designideen. Die Hauptsache ist, dass sich der Controller in MVC hauptsächlich über Daten und nicht über Betriebsknoten zu einem ViewModel entwickelt, was das Problem einer großen Anzahl von DOM-Operationen löst in MVC und verbessert die Leistung beim Rendern von Seiten. Reduzierte, langsame Ladegeschwindigkeit, was sich auf das Benutzererlebnis auswirkt. Wird hauptsächlich in Szenarien mit vielen Datenoperationen verwendet.
Szenarien: Szenarien mit vielen Datenoperationen, bequemer

1.37. Lassen Sie uns über Ihr Verständnis der Vorlagenkompilierung von Vue.js sprechen

Kurz gesagt, es wird zuerst in einen AST-Baum konvertiert und dann Erhalten Die Rendering-Funktion gibt VNODE (den virtuellen DOM-Knoten des Unternehmens Vue) zurück.
Detaillierte Schritte:

Kompilieren Sie zunächst die Vorlage in einen AST-Syntaxbaum (abstrakter Syntaxbaum ist eine Baumdarstellung der abstrakten Syntaxstruktur des Quellcodes). Compiler ist der Rückgabewert von createCompiler, der zum Erstellen eines Compilers verwendet wird. Verantwortlich für die Zusammenführung von Optionen.
Anschließend wird der AST generiert (der Prozess der Konvertierung des AST-Syntaxbaums in eine Rendering-Funktionszeichenfolge), um die Rendering-Funktion zu erhalten. VNode ist der virtuelle DOM-Knoten von Vue, der ( Labelname, untergeordneter Knoten, Text usw.)

1.38.

Antwort: Beim Umschließen dynamischer Komponenten werden inaktive Komponenteninstanzen zwischengespeichert, hauptsächlich um den Komponentenstatus beizubehalten oder ein erneutes Rendern zu vermeiden.
Verwendung: einfache Seiten.
Cache:
不缓存：

1.39.vue和react区别

相同点：都鼓励组件化，都有’props’的概念，都有自己的构建工具，Reat与Vue只有框架的骨架，其他的功能如路由、状态管理等是框架分离的组件。

不同点：React：数据流单向，语法—JSX，在React中你需要使用setState()方法去更新状态。Vue：数据双向绑定，语法–HTML，state对象并不是必须的，数据由data属性在Vue对象中进行管理。适用于小型应用，但对于对于大型应用而言不太适合。

1.40.vue生命周期的理解？

参照大神文章:vue笔记 - 生命周期第二次学习与理解

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 Nicht zwischenspeichern:

1.39 .Unterschiede zwischen Vue und React

Gleiche Punkte: Beide fördern die Komponentisierung, beide haben das Konzept von „Requisiten“ und beide haben ihre eigenen Konstruktionswerkzeuge, und Vue verfügt nur über das Grundgerüst des Frameworks und andere Funktionen wie Routing , Zustandsverwaltung usw. sind Frameworks. Separate Komponenten.

Unterschiede: React: unidirektionaler Datenfluss, Syntax – JSX, in React müssen Sie die setState()-Methode verwenden, um den Status zu aktualisieren. Vue: Zwei-Wege-Datenbindung, Syntax – HTML, Statusobjekt ist nicht erforderlich, Daten werden im Vue-Objekt durch das Datenattribut verwaltet. Geeignet für kleine Anwendungen, jedoch nicht für große Anwendungen.

1.40. Den Vue-Lebenszyklus verstehen?

🎜Lesen Sie den tollen Artikel: Vue-Notizen – zweites Lernen und Verstehen des Lebenszyklus🎜🎜🎜beforeCreate ist der erste Hook, der nach new Vue() ausgelöst wird. In der aktuellen Phase werden die Daten und Methoden zu Daten, Methoden, berechnet und überwacht sind alle nicht zugänglich. 🎜🎜created erfolgt, nachdem die Instanz erstellt wurde. Die Datenbeobachtung ist in der aktuellen Phase abgeschlossen, d. h. die Daten können hier verwendet und geändert werden, wodurch die aktualisierte Funktion nicht ausgelöst wird. 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 der Aktualisierung, das heißt, die Reaktionsdaten werden aktualisiert und der virtuelle Dom wird vor dem erneuten Rendern ausgelöst. Sie können die Daten in der aktuellen Phase ändern, ohne ein erneutes Rendern 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 erfolgt, bevor die Instanz zerstört wird. Die Instanz kann zu diesem Zeitpunkt 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. 🎜🎜🎜1.41. Lassen Sie uns über die Diff-Algorithmen der Vue2.x- und Vue3.x-Renderer sprechen🎜🎜🎜Einfach ausgedrückt hat der Diff-Algorithmus den folgenden Prozess: 1. Vergleichen Sie Peers und vergleichen Sie dann untergeordnete Knoten. 2. Beurteilen Sie 1. Die Situation, in der eine Partei untergeordnete Knoten hat und die andere nicht (wenn die neuen untergeordneten Knoten keine untergeordneten Knoten haben, entfernen Sie die alten untergeordneten Knoten) 🎜 3. Vergleichen Sie die Situation, in der beide untergeordneten Knoten untergeordnete Knoten haben (Kernunterschied) 🎜 3. Rekursiv Vergleichen Sie untergeordnete Knoten 🎜

Die zeitliche Komplexität des normalen Diff zwischen zwei Bäumen beträgt O(n^3), aber in tatsächlichen Situationen verschieben wir DOM selten über Ebenen hinweg, daher optimiert Vue den Diff von O(n^3). ) -> O(n), nur wenn die alten und neuen untergeordneten Knoten mehrere untergeordnete Knoten sind, muss der Kern-Diff-Algorithmus für den Vergleich auf gleicher Ebene verwendet werden. 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源码看。)

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

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

编码阶段

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

SEO优化

1.预渲染
2.服务端渲染SSR

打包优化

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

用户体验

1.骨架屏
2.PWA

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

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

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

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

1.44.SPA 单页面的理解，它的优缺点分别是什么

SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS
一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转
取而代之的是利用路由机制实现 HTML 内容的变换, UI 与用户的交互，避免页面的重新加载
优点：

1、用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染
2、基于上面一点，SPA 相对对服务器压力小
3、前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理

缺点：

1、初次加载耗时多：为实现单页 Web 应用功能及显示效果，
需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载
2、前进后退路由管理：由于单页应用在一个页面中显示所有的内容，
所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理
3、SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势

1.45.vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？

第一步：在components目录新建你的组件文件（indexPage.vue），script一定要export default {}
第二步：在需要用的页面（组件）中导入：import indexPage from ‘@/components/indexPage.vue’
第三步：注入到vue的子组件的components属性上面,components:{indexPage}
第四步：在template视图view中使用，
例如有indexPage命名，使用的时候则index-page

1.46.vue如何实现按需加载配合webpack设置

webpack中提供了require.ensure()来实现按需加载。以前引入路由是通过import 这样的方式引入，改为const定义的方式进行引入。
不进行页面按需加载引入方式：import home from '../../common/home.vue'
进行页面按需加载的引入方式：const home = r => require.ensure( [], () => r (require('../../common/home.vue')))

Der Kern-Diff-Algorithmus von Vue2 verwendet einen Double-End-Vergleichsalgorithmus. Gleichzeitig beginnt er mit dem Vergleich von beiden Enden des alten und des neuen untergeordneten Knotens, verwendet den Schlüsselwert, um den wiederverwendbaren Knoten zu finden, 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 dem Inferno-Algorithmus. 🎜🎜Der Typ des VNode wird beim Erstellen bestimmt, und Bitoperationen werden verwendet, um den Typ eines VNode während des Mount-/Patch-Prozesses zu bestimmen Kern-Diff-Algorithmus, die Leistung wurde im Vergleich zu Vue2.x verbessert. (Die tatsächliche Implementierung kann in Verbindung mit dem Vue3.x-Quellcode angezeigt werden.) 🎜🎜Dieser Algorithmus nutzt auch die Idee der dynamischen Programmierung, um die längste rekursive Teilsequenz zu lösen. 🎜

1.42. Welche Leistungsoptimierungen haben Sie für Vue vorgenommen?

🎜Codierungsphase🎜

🎜1. Versuchen Sie, die Daten in Daten zu reduzieren, und fügen Sie Getter und Setter sowie den entsprechenden 2.Watcher hinzu.
3.v- if und v-for können nicht zusammen verwendet werden
4. Wenn Sie v-for verwenden müssen, um Ereignisse an jedes Element zu binden, verwenden Sie einen Ereignis-Proxy
5. Die SPA-Seite verwendet die Keep-Alive-Cache-Komponente
6. Verwenden Sie in mehr Fällen v-if anstelle von v-show
7. Der Schlüssel ist garantiert eindeutig
8. Verwenden Sie Routing Lazy Loading und asynchrone Komponenten
9. Anti-Shake, Drosselung
10. Module von Drittanbietern werden bei Bedarf importiert
11. Lange Listen werden in den sichtbaren Bereich gescrollt und dynamisch geladen
12. Lazy Loading von Bildern🎜🎜 🎜SEO-Optimierung🎜

🎜1. Vor-Rendering
2. Serverseitiges Rendering SSR🎜🎜🎜Verpackungsoptimierung🎜

🎜1. Tree Shaking/Scope Hoisting
3. Verwenden Sie CDN, um Module von Drittanbietern zu laden
4. Multithread-Paketierung von Happypack
5. SplitChunks extrahieren öffentliche Dateien
6. SourceMap-Optimierung🎜🎜🎜Benutzererfahrung🎜🎜1. Skeleton-Bildschirm
2.PWA🎜🎜🎜In Ordnung Cache-Optimierung (Client-Cache, Server-Cache) verwenden, GZIP-Komprimierung auf dem Server aktivieren usw. 🎜

1.43. Lassen Sie uns über die Implementierungsprinzipien von Hash-Routing und Verlaufs-Routing sprechen

🎜Der Wert von location.hash ist eigentlich das Ding nach # in die URL. 🎜🎜history wird tatsächlich mithilfe der in HTML5 bereitgestellten API implementiert, hauptsächlich history.pushState() und history.replaceState(). 🎜

1.44. SPA-Einzelseite verstehen, welche Vor- und Nachteile sie hat

🎜SPA (Einzelseitenanwendung) lädt nur den entsprechenden HTML- und JavaScript-Code, wenn die Webseite initialisiert wird und CSS
Sobald die Seite geladen ist, lädt SPA die Seite aufgrund von Benutzervorgängen nicht neu und springt nicht.
Stattdessen nutzt es den Routing-Mechanismus, um die Transformation von HTML-Inhalten zu realisieren und die Interaktion zwischen Benutzeroberfläche und Benutzern zu vermeiden Neuladen der Seite
Vorteile: 🎜

🎜1. Die Benutzererfahrung ist gut und schnell. Änderungen im Inhalt erfordern kein Neuladen der gesamten Seite, wodurch unnötige Sprünge und wiederholte Darstellungen vermieden werden.
2. Basierend auf dem Im oben genannten Punkt übt SPA weniger Druck auf den Server aus.
3. Die Front-End- und Back-End-Verantwortlichkeiten sind getrennt und die Struktur ist klar. Das Front-End führt die interaktive Logik aus und das Back-End ist für die Datenverarbeitung verantwortlich . Nachteile: 🎜

🎜1. Das anfängliche Laden dauert lange: Um die Funktionen und Anzeigeeffekte von Single-Page-Webanwendungen zu realisieren, müssen JavaScript und CSS beim Laden einheitlich geladen werden Seite, und einige Seiten werden bei Bedarf geladen
2. Vorwärts- und Rückwärts-Routing-Verwaltung: Da Einzelseitenanwendungen der gesamte Inhalt auf einer Seite angezeigt werden,
können Sie die Vorwärts- und Rückwärtsfunktionen des Browsers nicht verwenden. Alle Seitenwechsel erfordern eine eigene Stapelverwaltung
3. SEO ist schwierig: Da sich der gesamte Inhalt auf einer Seite befindet, wird die Anzeige dynamisch ersetzt, daher weist es eine natürliche Schwäche in SEO auf🎜🎜

1.45 Wie benutzerdefinierte Komponenten in vue.cli verwenden? Sind bei Ihnen Probleme aufgetreten?

🎜Schritt eins: Erstellen Sie eine neue Komponentendatei (indexPage.vue) im Komponentenverzeichnis. Das Skript muss export default {}
sein Schritt: Importieren Sie es in die Seite (Komponente), die Sie benötigen: import indexPage from '@/components/indexPage.vue'
Schritt 3: Injizieren Sie es in das Komponentenattribut der Unterkomponente von vue ,components:{indexPage}
Schritt 4: Verwenden Sie es in der Vorlagenansicht.
Wenn es beispielsweise indexPage heißt, wird es bei der Verwendung indexiert. page🎜🎜

1.46. Wie Vue das On-Demand-Laden mit Webpack-Einstellungen implementiert

🎜webpack stellt require.ensure() zur Verfügung, um es zu erreichen -Bedarfsladen. In der Vergangenheit wurden Routen durch Import eingeführt, jetzt werden sie durch die Definition von const eingeführt.
Die Einführungsmethode ohne bedarfsgesteuertes Laden von Seiten: import home from '../../common/home.vue'
Die Einführungsmethode für bedarfsgesteuertes Laden Anzahl der Seiten: const home = r => require.ensure( [], () => r (require('../../common/home.vue')))🎜

二、组件 Component

2.1.vue中如何编写可复用的组件 （编写组件的原则）

以组件功能命名
只负责ui的展示和交互动画，不要在组件里与服务器打交道（获取异步数据等）
可复用组件不会因组件使用的位置、场景而变化。尽量减少对外部条件的依赖。

2.2.如何让CSS只在当前组件中起作用？

在每一个Vue.js组件中都可以定义各自的CSS、 JavaScript代码。如果希望组件内写的CSS只对当前组件起作用，只需要在Style标签添加Scoped属性即可

2.3.keep-alive是什么？

如果需要在组件切换的时候，保存一些组件的状态防止多次渲染，就可以使用 keep-alive 组件包裹需要保存的组件。

两个重要属性，include 缓存组件名称，exclude 不需要缓存的组件名称。

2.4.如何在 Vue. js动态插入图片

对“src”属性插值将导致404请求错误。应使用 v-bind:src （简写:src）格式代替。

2.5.父子组件的生命周期顺序(可参照上方图解)

加载渲染过程：
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
子组件更新过程：父beforeUpdate->子beforeUpdate->子updated->父updated
父组件更新过程：父beforeUpdate->父updated
销毁过程：父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

三、Vuex

3.1.vuex的核心概念

1.state => 基本数据
2.getters => 从基本数据派生的数据
3.mutations => 修改数据，同步
4.actions => 修改数据，异步 (Action 提交的是 mutation，而不是直接变更状态)
5.modules => 模块化Vuex

3.2.vuex是什么？怎么使用？哪种功能场景使用它？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理器，采用集中式存储管理应用的所有组件的状态，主要是为了多页面、多组件之间的通信。
Vuex有5个重要的属性，分别是 State、Getter、Mutation、Action、Module，由 view 层发起一个 Action 给 Mutation，在 Mutation 中修改状态，返回新的状态，通过 Getter暴露给 view层的组件或者页面，页面监测到状态改变于是更新页面。如果你的项目很简单，最好不要使用 Vuex，对于大型项目，Vuex 能够更好的帮助我们管理组件外部的状态，一般可以运用在购物车、登录状态、播放等场景中。

3.3.多个组件之间如何拆分各自的state，每块小的组件有自己的状态，它们之间还有一些公共的状态需要维护，如何思考这块

1.公共的数据部分可以提升至和他们最近的父组件，由父组件派发
2.公共数据可以放到vuex中统一管理，各组件分别获取

3.4.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？

1.如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。

2.如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用，并包装成promise返回，在调用处用async await处理返回的数据。如果不要复用这个请求，那么直接写在vue文件里很方便

3.5.Vuex中如何异步修改状态

actions与mutations作用类似，都是可以对状态进行修改。不同的是actions是异步操作的。

actions是可以调用Mutations里的方法的。

const actions={
	addActions(context){
		context.commit('add',10);//调用mutations中的方法
		setTimeout(()=>{context.commit('reduce')},5000)
	//	setTimeOut(()=>{context.commit('reduce')},3000);
		console.log('我比reduce提前执行');
	},
	
	reduceActions({commit}){
		commit('reduce');
	}}

3.6.Vuex中actions和mutations的区别

Mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }})

Action Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }})

3.7.怎么在组件中批量使用Vuex的state状态？

使用mapState辅助函数, 利用对象展开运算符将state混入computed对象中

import {mapState} from 'vuex' export default{ computed:{ ...mapState(['price','number']) } }

3.8.Vuex中状态是对象时，使用时要注意什么？

对象是引用类型，复制后改变属性还是会影响原始数据，这样会改变state里面的状态，是不允许，所以先用深度克隆复制对象，再修改。

四、Router

4.1.vue-router 路由模式有几种

1.Hash: 使用 URL 的 hash 值来作为路由。支持所有浏览器。 带#。如：http://localhost:8080/#/pageA。改变hash，浏览器本身不会有任何请求服务器动作的，但是页面状态和url已经关联起来了。
2.History: 以来 HTML5 History API 和服务器配置。参考官网中 HTML5 History 模式，不带#， 如：http://localhost:8080/ 正常的而路径，并没有#。基于HTML5的 pushState、replaceState实现
3.Abstract: 支持所有 javascript 运行模式。如果发现没有浏览器的 API，路由会自动强制进入这个模式。

4.2.vue-router如何定义嵌套路由

通过children 数组：

const router = new VueRouter({
  routes: [
    {
      path: "/parentPage",
      component: testPage,
      children: [
        {
          path: "/childrenA",
          component: childrenComponentA,
        },
        {
          path: "/childrenB",
          component: childrenComponentB,
        },
      ],
    },
    {
      // 其他和parentPage平级的路由
    },
  ],});

4.3.vue-router有哪几种导航钩子？

1.全局导航钩子：router.beforeEach(to,from,next)
2.组件内的钩子beforeRouteEnter (to, from, next) beforeRouteUpdate (to, from, next) beforeRouteLeave (to, from, next)
3.单独路由独享组件 beforeEnter: (to, from, next)

参数：有to（去的那个路由）、from（离开的路由）、next（一定要用这个函数才能去到下一个路由，如果不用就拦截）最常用就这几种

4.4. $ route和$ router的区别

1、$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。

1.$route.path 字符串，对应当前路由的路径，总是解析为绝对路径如"/foo/bar"。
2. $route.params 一个 key/value 对象，包含了 动态片段 和 全匹配片段， 如果没有路由参数，就是一个空对象。
3. $route.query 一个 key/value 对象，表示 URL 查询参数。 例如，对于路径 /foo?user=1，则有$route.query.user == 1， 如果没有查询参数，则是个空对象
4. $route.hash 当前路由的hash值 (不带#) ，如果没有 hash 值，则为空字符串
5. $route.fullPath 完成解析后的 URL，包含查询参数和hash的完整路径。
6. $route.matched 数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
7. $route.name 当前路径名字
8. $ route.meta 路由元信息

2、$router是“路由实例”对象包括了路由的跳转方法，钩子函数等

实例方法：

1）、push

1.字符串this.$router.push('home')
2. 对象this.$router.push({path:'home'})
3. 命名的路由this.$router.push({name:'user',params:{userId:123}})
4.带查询参数，变成 /register?plan=123this.$router.push({path:'register',query:{plan:'123'}})
push方法其实和是等同的。
注意：push方法的跳转会向 history 栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。

2）、go
页面路由跳转
前进或者后退this.$router.go(-1) // 后退

3）、replace
push方法会向 history 栈添加一个新的记录，而replace方法是替换当前的页面，
不会向 history 栈添加一个新的记录

4.5.路由之间跳转的方式

1.声明式（标签跳转）
2.编程式（ js跳转）

4.6.active-class是哪个组件的属性

vue-router 模块 的router-link组件

4.7.vue-router实现路由懒加载(动态加载路由)

把不同路由对应的组件分割成不同的代码块，然后当路由被访问时才加载对应的组件即为路由的懒加载，可以加快项目的加载速度，提高效率

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      name: 'Home'，      
      component:() = import('../views/home')
	}
  ]})

4.8.怎么定义vue-router的动态路由以及如何获取传过来的动态参数？

在router目录下的index.js文件中，对path属性加上/：id
使用router对象的params id

面试官:我难道问不倒这小子了?(面试官持续懵逼中) 对大家有帮助的话三连呀~ 持续更新

【Empfohlene verwandte Video-Tutorials: vuejs-Einführungs-Tutorial, Erste Schritte mit dem Web-Frontend】

Das obige ist der detaillierte Inhalt von[Hämatemesis] Zusammenfassung der Interviewfragen von Vue.js und Analyse der Antworten (kommen Sie und holen Sie sie ab). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!