In diesem Artikel werden einige Vue-Interviewfragen mit Ihnen geteilt (mit Antwortanalyse). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.
Die in dem Artikel enthaltenen Informationen stammen aus dem Internet und sind eine persönliche Zusammenfassung. Bei Verstößen kontaktieren Sie mich bitte, um sie zu löschen.
1. Verständnis von MVVM
MVVM ist die Abkürzung für Model-View-ViewModel.
Modell stellt das Datenmodell dar, und im Modell kann auch Geschäftslogik für Datenänderung und -betrieb definiert werden.
View stellt die UI-Komponente dar, die für die Konvertierung des Datenmodells in eine Benutzeroberfläche zur Anzeige verantwortlich ist.
ViewModel Überwacht Änderungen in Modelldaten, steuert das Ansichtsverhalten und verwaltet die Benutzerinteraktion. Ein einfaches Verständnis ist ein Objekt, das Ansicht und Modell synchronisiert und Modell und Ansicht verbindet.
Unter der MVVM-Architektur gibt es keine direkte Verbindung zwischen View und Model. Stattdessen interagieren sie über ViewModel. Die Interaktion zwischen Model und ViewModel erfolgt in beide Richtungen, sodass Änderungen in den View-Daten mit dem Model und den Model-Daten synchronisiert werden Änderungen werden auch sofort in der Ansicht angezeigt.
ViewModel verbindet die Ansichtsebene und die Modellebene durch bidirektionale Datenbindung. Die Synchronisierung zwischen Ansicht und Modell erfolgt vollständig automatisch und ohne menschliches Eingreifen, sodass sich Entwickler nur auf die Geschäftslogik konzentrieren müssen und nicht manuell arbeiten müssen DOM muss nicht auf die Synchronisierung des Datenstatus geachtet werden. Die Verwaltung des komplexen Datenstatus wird vollständig von MVVM verwaltet.
2. Vue implementiert die bidirektionale Datenbindung
Vue implementiert die bidirektionale Datenbindung hauptsächlich durch: Verwendung von Datenhijacking in Kombination mit dem Herausgeber-Abonnenten-Modell und Kaperung jedes Objekts durch Object.defineProperty() Der Setter und Getter der Eigenschaft veröffentlichen Nachrichten an Abonnenten, wenn sich Daten ändern, und lösen entsprechende Listening-Rückrufe aus. Wenn Sie ein einfaches Javascript-Objekt als Datenoption an eine Vue-Instanz übergeben, durchläuft Vue seine Eigenschaften und konvertiert sie mithilfe von Object.defineProperty in Getter/Setter. Die Getter/Setter sind für den Benutzer nicht sichtbar, aber intern ermöglichen sie Vue, Abhängigkeiten zu verfolgen und Änderungen zu benachrichtigen, wenn auf Eigenschaften zugegriffen und diese geändert werden. (Teilen von Lernvideos: vue-Video-Tutorial) Die bidirektionale Datenbindung von
vue verwendet MVVM als Eingang zur Datenbindung, integriert Observer, Compile und Watcher, verwendet Observer zur Überwachung der Datenänderungen Ihres eigenen Modells und verwendet Compile Um die Anweisungen der Kompilierungsvorlage zu analysieren (in Vue wird sie zum Parsen von {{}} verwendet) und schließlich den Beobachter verwenden, um eine Kommunikationsbrücke zwischen dem Beobachter und Compile aufzubauen, um Datenänderungen zu erreichen –> Aktualisierungen anzeigen, interaktive Änderungen anzeigen ( Eingabe)—>gt ;Das Datenmodell ändert den bidirektionalen Bindungseffekt.
3. Parameterübertragung zwischen Vue-Komponenten
1. Übergabe von Werten zwischen übergeordneter und untergeordneter Komponente: Übergabe der untergeordneten Komponente an die übergeordnete Komponente: $ Die Emit-Methode übergibt Parameter
2. Die Datenübertragung zwischen Nicht-übergeordneten und untergeordneten Komponenten und Geschwisterkomponenten übergibt Werte
eventBus, der ein Ereigniszentrum erstellen soll, das einer Übertragungsstation entspricht Wird zum Senden und Empfangen von Ereignissen verwendet. Wenn das Projekt relativ klein ist, ist dies angemessener.
4. Der Unterschied zwischen v-show und v-if
Der Unterschied zwischen v-show und v-if:
- v-show ist CSS-Umschaltung, v-if ist vollständige Zerstörung und Neuerstellung .
Verwenden Sie
- Verwenden Sie v-show, wenn Sie häufig wechseln, verwenden Sie v-if, wenn es während der Laufzeit nur wenige Änderungen gibt
v-if='false' v-if ist bedingtes Rendern, es wird nicht gerendert, wenn es falsch ist
beforeCreate
(vor der Erstellung) Bevor die Datenbeobachtungs- und Initialisierungsereignisse begonnen haben
created
(nach der Erstellung) Vollständige Datenbeobachtung, Betrieb von Attributen und Methoden sowie Initialisierung Ereignis, das Attribut $el wurde noch nicht angezeigt.
beforeMount
(vor dem Laden) wird aufgerufen, bevor der Mount startet, und die zugehörige Renderfunktion wird zum ersten Mal aufgerufen. Die Instanz hat die folgende Konfiguration abgeschlossen: Kompilieren Sie die Vorlage und generieren Sie HTML aus den Daten in den Daten und der Vorlage. Beachten Sie, dass der HTML-Code zu diesem Zeitpunkt noch nicht auf der Seite bereitgestellt wurde.
montiert
(nach dem Laden) Wird aufgerufen, nachdem el durch das neu erstellte vm.$el ersetzt und in die Instanz eingebunden wurde. Die Instanz hat die folgende Konfiguration abgeschlossen: Ersetzen Sie das DOM-Objekt, auf das das el-Attribut zeigt, durch den oben kompilierten HTML-Inhalt. Vervollständigen Sie die Darstellung des HTML-Codes in der Vorlage in der HTML-Seite. Während dieses Prozesses wird eine Ajax-Interaktion durchgeführt.
beforeUpdate
(vor dem Update) Wird aufgerufen, bevor die Daten aktualisiert werden, was geschieht, bevor das virtuelle DOM neu gerendert und gepatcht wird. Sie können den Status in diesem Hook weiter ändern, ohne einen zusätzlichen Re-Rendering-Prozess auszulösen.
updated(Aktualisiert) Wird nach dem erneuten Rendern und Patchen des virtuellen DOM aufgrund von Datenänderungen aufgerufen. Beim Aufruf wurde das Komponenten-DOM aktualisiert, sodass DOM-abhängige Vorgänge ausgeführt werden können. In den meisten Fällen sollte jedoch eine Statusänderung während dieses Zeitraums vermieden werden, da dies zu einer Endlosschleife von Aktualisierungen führen kann. Dieser Hook wird beim serverseitigen Rendern nicht aufgerufen.
beforeDestroy (vor der Zerstörung) Wird aufgerufen, bevor die Instanz zerstört wird. Die Instanz ist weiterhin vollständig verfügbar.
destroyed (nach der Zerstörung) Wird aufgerufen, nachdem die Instanz zerstört wurde. Nach dem Aufruf werden alle Ereignis-Listener entfernt und alle untergeordneten Instanzen zerstört. Dieser Hook wird beim serverseitigen Rendern nicht aufgerufen.
1. Was ist der Vue-Lebenszyklus?
Antwort: Der Prozess von der Erstellung bis zur Zerstörung einer Vue-Instanz ist der Lebenszyklus. Eine Reihe von Prozessen vom Erstellen, Initialisieren von Daten, Kompilieren von Vorlagen, Mounten von Dom→Rendering, Aktualisieren→Rendering und Zerstörung werden als Lebenszyklus von Vue bezeichnet.
2. Welche Rolle spielt der Vue-Lebenszyklus?
Antwort: In seinem Lebenszyklus gibt es mehrere Ereignis-Hooks, die es uns erleichtern, bei der Steuerung des Prozesses der gesamten Vue-Instanz eine gute Logik zu entwickeln.
3. Wie viele Phasen gibt es im Vue-Lebenszyklus?
A: Es kann insgesamt in 8 Phasen unterteilt werden: vor/nach der Erstellung, vor/nach dem Laden, vor/nach dem Update, vor/nach der Zerstörung.
4. Welche Hooks werden beim ersten Laden der Seite ausgelöst?
Antwort: Es wird Folgendes ausgelöst: beforeCreate, erstellt, beforeMount, gemountet.
5. In welchem Zyklus wird das DOM-Rendering abgeschlossen?
Antwort: Das DOM-Rendering ist im gemounteten Zustand abgeschlossen.
5. Array-Verwendung der gebundenen Klasse
- Objektmethode
v-bind:class="{'orange': isRipe, 'green': isNotRipe}"v-bind:class="{'orange': isRipe, 'green': isNotRipe}"
- 数组方法
v-bind:class="[class1, class2]"
- 行内
v-bind:style="{color: color, fontSize: fontSize+'px' }"
Array-Methodev-bind:class="[class1, class2]"
inlinev-bind:style="{color: color, fontSize: fontSize+'px' }"
6. Der Unterschied zwischen berechnetem Attribut und überwachtem Attribut
Das berechnete Attribut überwacht automatisch Änderungen in abhängigen Werten, um Inhalte dynamisch zurückzugeben. Wenn sich der überwachte Wert ändert, kann ein Rückruf ausgelöst werden. Der Unterschied liegt also in der Verwendung. Wenn Sie die Wertänderungen kennen und dann die Geschäftslogik ausführen müssen, können Sie auch umgekehrte oder gemischte Methoden verwenden sind falsche Verwendungen.
1. Welche Optionen hat ein berechnetes Objekt?
Es gibt zwei Optionen: get und set
2 Was ist der Unterschied zwischen berechnet und Methoden?
methods ist eine Methode, sie kann Parameter akzeptieren, berechnete können jedoch nicht zwischengespeichert werden, Methoden jedoch nicht
3. Kann berechnete Daten auf Daten von anderen Komponenten zurückgreifen?
Berechnet kann von anderen berechneten, sogar von Daten anderer Komponenten abhängen
4 Welche Optionen hat die Uhr, wenn sie ein Objekt ist?
Handler tief Ist es tief? Wird es sofort ausgeführt?
Zusammenfassung
Wenn sich einige Daten mit anderen Daten ändern müssen, wird empfohlen, berechnete Daten zu verwenden. Wenn es eine allgemeine Reaktion auf Datenänderungen gibt, wird empfohlen, beim Ausführen einiger Geschäftslogik- oder asynchroner Vorgänge einen Watcher zu verwenden.
7 Routing-Implementierung von Vue: Hash-Modus und Verlaufsmodus mittleres Symbol „#“, # und die Zeichen nach # werden Hashes genannt und mit window.location.hash gelesen. Funktionen: Obwohl der Hash in der URL enthalten ist, ist er nicht in der HTTP-Anfrage enthalten, die zur Steuerung von Browseraktionen verwendet wird , Es ist für die serverseitige Sicherheit nutzlos und der Hash lädt die Seite nicht neu. Im Hash-Modus wird nur der Inhalt vor dem Hash-Symbol in die Anfrage einbezogen, z. B. http://www.xxx.com. Daher wird 404 für das Backend nicht erreicht, selbst wenn keine vollständige Abdeckung der Route erreicht wird Fehler zurückgegeben werden.
history-Modus:
history übernimmt die neuen Funktionen von HTML5 und bietet zwei neue Methoden: pushState(), replaceState() zum Ändern des Browser-Verlaufsstapels und das popState-Ereignis zur Überwachung von Statusänderungen. Im Verlaufsmodus muss die URL des Front-Ends mit der URL übereinstimmen, die die Anfrage an das Back-End tatsächlich initiiert, z. B. http://www.xxx.com/items/id. Wenn im Backend die Routing-Verarbeitung für /items/id fehlt, wird ein 404-Fehler zurückgegeben.
8. Was ist der Unterschied zwischen Vue, Angular und React?
(Die Version wird ständig aktualisiert, die folgenden Unterschiede sind möglicherweise nicht sehr korrekt. Ich verwende in meiner Arbeit nur Vue und bin mit Angular und React nicht sehr vertraut)
1 Der Unterschied zu AngularJS
ist dasselbe. Klicken Sie auf
:Beide unterstützen Befehle: integrierte Befehle und benutzerdefinierte Befehle; beide unterstützen Filter: integrierte Filter und benutzerdefinierte Filter unterstützen beide die bidirektionale Datenbindung;
Unterschiede:
AngularJS hat einen hohen Lernaufwand, wie zum Beispiel die Hinzufügung der Dependency-Injection-Funktion, während die von Vue.js selbst bereitgestellten APIs in Bezug auf die Leistung relativ einfach und intuitiv sind; AngularJS setzt auf Dirty Checking von Daten, also Watcher Je mehr, desto langsamer; Vue.js verwendet eine auf Abhängigkeitsverfolgung basierende Beobachtung und asynchrone Warteschlangenaktualisierungen, und alle Daten werden unabhängig ausgelöst. 2. Unterschiede zu React. Gleiche Punkte:
Beide müssen kompiliert und verwendet werden. Die Grundidee ist dieselbe: Alles ist eine Komponente, und Komponenteninstanzen können verschachtelt werden. Beide verfügen über sinnvolle Hook-Funktionen, die es Entwicklern ermöglichen, die Verarbeitungsanforderungen anzupassen , Route und andere Funktionen werden als Plug-Ins in das Kernpaket geladen; die Mixins-Funktion wird in der Komponentenentwicklung unterstützt. Unterschiede:
Das von React verwendete virtuelle DOM führt Dirty-Checks für die gerenderten Ergebnisse durch. Vue.js stellt Anweisungen, Filter usw. in der Vorlage bereit, mit denen das virtuelle DOM sehr bequem und schnell bedient werden kann. 9. Ereignismodifizierer wenn es gedrückt wird
10. Warum sind die Daten in der Komponente eine Funktion? Warum müssen die Daten in der Komponente eine Funktion sein und dann ein Objekt zurückgeben, während es in der neuen Vue-Instanz Daten sein können? direkt ein Objekt?
Da Komponenten zur Wiederverwendung verwendet werden, handelt es sich bei Objekten in JS um Referenzbeziehungen, sodass der Bereich nicht isoliert ist und neue Vue-Instanzen nicht wiederverwendet werden, sodass es kein Problem mit der Referenzierung von Objekten gibt. Für Vue ist es das Verständnis einer Menge des progressiven Rahmens
11. Die Bedeutung von progressiv bedeutet: die geringste Interessenvertretung.
Vue ist in einigen Aspekten möglicherweise nicht so gut wie React oder Angular, aber es ist schrittweise und hat keine starken Ansprüche. Sie können damit eine oder zwei Komponenten auf dem ursprünglichen großen System implementieren und es als jQuery verwenden. Sie können es auch als Ganzes verwenden. Verwenden Sie es, um mit der gesamten Familie zu entwickeln, und verwenden Sie es als Angular. Sie können seine Ansicht auch verwenden, um die gesamte untere Ebene Ihres eigenen Designs anzupassen. Sie können die Konzepte von OO und Entwurfsmustern in der zugrunde liegenden Datenlogik verwenden, oder Sie können funktionale Methoden verwenden. Es tut nur das, was es tun sollte, und tut nichts, was es nicht tun sollte mehr. Mein Verständnis der Bedeutung von „progressiv“ ist: nicht mehr tun als erforderlich ist.
Die Rolle des Schlüssels dient hauptsächlich der Effizienz. Aktualisiert virtuell DOM. Darüber hinaus wird bei der Übergangsumschaltung von Elementen mit demselben Tag-Namen auch das Schlüsselattribut verwendet. Der Zweck besteht auch darin, Vue die Unterscheidung zu ermöglichen. Andernfalls ersetzt Vue nur seine internen Attribute und löst keinen Übergang aus Wirkung.
14. Die Priorität von v-for und v-if
v-for hat eine höhere Priorität als v-if
15. Die Methode der untergeordneten Komponente beim Vue-Aufruf die übergeordnete Komponente
Die erste Methode besteht darin, die Methode der übergeordneten Komponente direkt über this.$parent.event in der untergeordneten Komponente aufzurufen.
Die zweite Methode besteht darin, $emit in der untergeordneten Komponente zu verwenden, um ein Ereignis für die übergeordnete Komponente auszulösen, und die übergeordnete Komponente kann dieses Ereignis abhören.
Die dritte Methode besteht darin, dass die übergeordnete Komponente die Methode an die untergeordnete Komponente übergibt und die Methode direkt in der untergeordneten Komponente aufgerufen wird.
2. Die übergeordnete Komponente in Vue ruft die Methode der untergeordneten Komponente auf.
Die übergeordnete Komponente verwendet das ref-Attribut, um die Methode der untergeordneten Komponente zu betreiben. 父：
<child ref="childMethod"></child>
子：
method: {
test() {
alert(1)
}
}
在父组件里调用test即 this.$refs.childMethod.test()Nach dem Login kopieren
key 值的作用
使用key来给每个节点做一个唯一标识
key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。
14、v-for 与 v-if 的优先级
v-for的优先级比v-if高
15、组件
1、vue中子组件调用父组件的方法
第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法。
第二种方法是在子组件里用$emit
3. Wertübertragung zwischen Vue-Komponenten(1) Die übergeordnete Komponente übergibt den Wert an die untergeordnete Komponente:
Dynamische Bindung von Eigenschaften, wenn die übergeordnete Komponente die untergeordnete Komponente aufruft Requisiten erhalten dynamisch gebundene Attribut-Requisiten: ['dataList']
Die untergeordnete Komponente verwendet Daten
(4) Übertragen von Werten zwischen Vue-Komponenten auf Seitenebene Verwenden Sie den Vue-Router, um Parameter mit Parametern über Sprunglinks zu übergeben. 使用本地缓存localStorge。
使用vuex数据管理传值。
（5）说说vue的动态组件。
多个组件通过同一个挂载点进行组件的切换，is的值是哪个组件的名称，那么页面就会显示哪个组件。
（6）keep-alive内置组件的作用
可以让当前组件或者路由不经历创建和销毁，而是进行缓存，凡是被keep-alive组件包裹的组件，除了第一次以外。不会经历创建和销毁阶段的。第一次创建后就会缓存到缓存当
(7)递归组件的用法
组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事。首先我们要知道，既然是递归组件，那么一定要有一个结束的条件，否则就会使用组件循环引用，最终出现“max stack size exceeded”的错误，也就是栈溢出。那么，我们可以使用v-if="false"作为递归组件的结束条件。当遇到v-if为false时，组件将不会再进行渲染。
16、怎么定义vue-router的动态路由？怎么获取传过来的值？
动态路由的创建，主要是使用path属性过程中，使用动态路径参数，以冒号开头，如下：
{
path: '/details/:id'
name: 'Details'
components: Details
}Nach dem Login kopieren
访问details目录下的所有文件，如果details/a，details/b等，都会映射到Details组件上。
当匹配到/details下的路由时，参数值会被设置到this.$route.params下，所以通过这个属性可以获取动态参数
this.$route.params.id
17、vue-router有哪几种路由守卫?
全局守卫：beforeEach
后置守卫：afterEach
全局解析守卫：beforeResolve
路由独享守卫：beforeEnter
18、$route和 $router的区别是什么？
$router为VueRouter的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等。
$route 是路由信息对象||跳转的路由对象，每一个路由都会有一个route对象，是一个局部对象，包含path,params,hash,query,fullPath,matched,name等路由信息参数。
19、vue-router响应路由参数的变化
(1)用watch 检测
-
(2)组件内导航钩子函数
20、 vue-router 传参
(1)使用Params:
只能使用name，不能使用path
参数不会显示在路径上
-
浏览器强制刷新参数会被清空
（2）使用Query：
参数会显示在路径上，刷新不会被清空
-
name 可以使用path路径
21、不用Vuex会带来什么问题？
1、可维护性会下降，你要想修改数据，你得维护三个地方
2、可读性会下降，因为一个组件里的数据，你根本就看不出来是从哪来的
3、增加耦合，大量的上传派发，会让耦合性大大的增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背。
22、vuex有哪几种属性？
有五种，分别是 State、 Getter、Mutation 、Action、 Module。
23、、vuex的State特性是？
1、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于与一般Vue对象里面的data
2、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新
3、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中
24、vuex的Getter特性是？
1、getters 可以对State进行计算操作，它就是Store的计算属性
2、 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用
3、 如果一个状态只在一个组件内使用，是可以不用getters
25、vuex的Mutation特性是？
1、Action 类似于 mutation，不同在于：
2、Action 提交的是 mutation，而不是直接变更状态。
3、Action 可以包含任意异步操作
26. Sollte der Ajax-Anfragecode in Vue.js in die Methoden der Komponente oder in die Aktionen von Vuex geschrieben werden?
1. Wenn die angeforderten Daten von anderen Komponenten gemeinsam genutzt werden sollen und nur innerhalb der angeforderten Komponente verwendet werden, besteht keine Notwendigkeit, sie in den Status von vuex zu versetzen.
2. Wenn es an anderer Stelle wiederverwendet wird, ist dies höchstwahrscheinlich erforderlich. Bitte setzen Sie die Anfrage in die Aktion, um die Wiederverwendung zu erleichtern, und verpacken Sie sie in eine versprochene Rückgabe, und verwenden Sie asynchrones Warten auf der Anrufseite, um die Rückgabe zu verarbeiten . Daten. Wenn Sie diese Anfrage nicht wiederverwenden möchten, ist es sehr praktisch, sie direkt in die Vue-Datei zu schreiben.
27. Der Unterschied zwischen dem bidirektionalen Datenbindungsprinzip von Vue, dem Vue2- und dem Vue3-Prinzip
Weil vue2.0 object.defineProperty nur Objekteigenschaften kapern und keine Änderungen in Array-Indizes überwachen kann, was zu Datensubskripten führt Der Nachteil besteht darin, dass die hinzugefügten Elemente nicht in Echtzeit reagieren können. Um dieses Problem zu lösen, können Sie nach der internen Vue-Verarbeitung push(), pop(), shift(), unshift(), splice(), sort(), reverse() für die Hack-Verarbeitung und andere Array-Attribute verwenden werden ebenfalls überwacht. Nein, es gibt bestimmte Einschränkungen.
Da object.defineProperty nur Objekteigenschaften kapern kann, muss jede Eigenschaft jedes Objekts durchlaufen werden. In vue2.0 wird die Datenüberwachung durch Rekursion + Durchquerung von Datenobjekten erreicht. Wenn der Attributwert ein Objekt ist, ist auch eine tiefe Durchquerung erforderlich.
Der Proxy in Vue3.0 kann nicht nur Proxy-Objekte, sondern auch Proxy-Arrays und dynamisch hinzugefügte Eigenschaften verwenden. Es gibt 13 Hijacking-Vorgänge: get ruft einen bestimmten Schlüsselwert ab (erhält 2 Parameter, Zielwert und Zielwert). legt einen Schlüsselwert fest (Zielwert, Zielschlüsselwert, zu ändernder Wert, ursprünglicher Wert vor Änderung). Apply verwendet den In-Operator, um zu bestimmen, ob ein Schlüssel vorhanden ist. deleteProperty löscht eine Eigenschaft. defineProperty definiert eine neue Eigenschaft.
Vielen Dank
Weitere Programmierkenntnisse finden Sie unter: Programmiervideo! !
Das obige ist der detaillierte Inhalt vonZusammenfassung häufiger Fragen im Vue-Interview (mit Antwortanalyse). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
