Heim > Artikel > Web-Frontend > Zusammenfassung häufiger Fragen im Vue-Interview (mit Antwortanalyse)
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.
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.
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.
2. Die Datenübertragung zwischen Nicht-übergeordneten und untergeordneten Komponenten und Geschwisterkomponenten übergibt Werte
4. Der Unterschied zwischen v-show und v-if
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.
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.
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.
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.
Antwort: Es wird Folgendes ausgelöst: beforeCreate, erstellt, beforeMount, gemountet.
Antwort: Das DOM-Rendering ist im gemounteten Zustand abgeschlossen.
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' }"
v-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 set2 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ängen4 Welche Optionen hat die Uhr, wenn sie ein Objekt ist?Handler tief Ist es tief? Wird es sofort ausgeführt?
Zusammenfassung
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?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: Unterschiede:
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 Verwenden Sie den Schlüssel, um jeden Knoten eindeutig zu identifizieren v-for hat eine höhere Priorität als v-if Die zweite Methode besteht darin, 使用key来给每个节点做一个唯一标识 key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,否则vue只会替换其内部属性而不会触发过渡效果。 v-for的优先级比v-if高 1、vue中子组件调用父组件的方法 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法。 第二种方法是在子组件里用 (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 1. Binden Sie das Attribut ref, wenn die übergeordnete Komponente die Unterkomponente aufruft 1 ('Methodenname', Übergabewert) 使用本地缓存localStorge。 使用vuex数据管理传值。 (5)说说vue的动态组件。 多个组件通过同一个挂载点进行组件的切换,is的值是哪个组件的名称,那么页面就会显示哪个组件。 (6)keep-alive内置组件的作用 可以让当前组件或者路由不经历创建和销毁,而是进行缓存,凡是被keep-alive组件包裹的组件,除了第一次以外。不会经历创建和销毁阶段的。第一次创建后就会缓存到缓存当 (7)递归组件的用法 组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事。首先我们要知道,既然是递归组件,那么一定要有一个结束的条件,否则就会使用组件循环引用,最终出现“max stack size exceeded”的错误,也就是栈溢出。那么,我们可以使用v-if="false"作为递归组件的结束条件。当遇到v-if为false时,组件将不会再进行渲染。 动态路由的创建,主要是使用path属性过程中,使用动态路径参数,以冒号开头,如下: 访问details目录下的所有文件,如果details/a,details/b等,都会映射到Details组件上。 当匹配到/details下的路由时,参数值会被设置到this.$route.params下,所以通过这个属性可以获取动态参数 this.$route.params.id 全局守卫:beforeEach $router为VueRouter的实例,是一个全局路由对象,包含了路由跳转的方法、钩子函数等。 $route 是路由信息对象||跳转的路由对象,每一个路由都会有一个route对象,是一个局部对象,包含path,params,hash,query,fullPath,matched,name等路由信息参数。 (1)用watch 检测 (2)组件内导航钩子函数 只能使用name,不能使用path 参数不会显示在路径上 浏览器强制刷新参数会被清空 参数会显示在路径上,刷新不会被清空 name 可以使用path路径 1、可维护性会下降,你要想修改数据,你得维护三个地方 2、可读性会下降,因为一个组件里的数据,你根本就看不出来是从哪来的 3、增加耦合,大量的上传派发,会让耦合性大大的增加,本来Vue用Component就是为了减少耦合,现在这么用,和组件化的初衷相背。 有五种,分别是 State、 Getter、Mutation 、Action、 Module。 1、Vuex就是一个仓库,仓库里面放了很多对象。其中state就是数据源存放地,对应于与一般Vue对象里面的data 1、getters 可以对State进行计算操作,它就是Store的计算属性 1、Action 类似于 mutation,不同在于: 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. 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! !
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 DOMSchlüssels
-Werts in Vue. 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
Die erste Methode besteht darin, die Methode der übergeordneten Komponente direkt über this.$parent.event in der untergeordneten Komponente aufzurufen.
$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()
key
值的作用
14、v-for 与 v-if 的优先级
15、组件
$emit
Wird in verwendet untergeordnete Komponente this.$parent.property/this.$parent.method.
(4) Übertragen von Werten zwischen Vue-Komponenten auf Seitenebene
Verwenden Sie den Vue-Router, um Parameter mit Parametern über Sprunglinks zu übergeben.
2. Die übergeordnete Komponente erhält den übergebenen Wert über den an die untergeordnete Komponente gebundenen 'Methodennamen'. 16、怎么定义vue-router的动态路由?怎么获取传过来的值?
{
path: '/details/:id'
name: 'Details'
components: Details
}
17、vue-router有哪几种路由守卫?
后置守卫:afterEach
全局解析守卫:beforeResolve
路由独享守卫:beforeEnter18、$route和 $router的区别是什么?
19、vue-router响应路由参数的变化
20、 vue-router 传参
(1)使用Params:
(2)使用Query:
21、不用Vuex会带来什么问题?
22、vuex有哪几种属性?
23、、vuex的State特性是?
2、state里面存放的数据是响应式的,Vue组件从store中读取数据,若是store中的数据发生改变,依赖这个数据的组件也会发生更新
3、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中24、vuex的Getter特性是?
2、 虽然在组件内也可以做计算属性,但是getters 可以在多组件之间复用
3、 如果一个状态只在一个组件内使用,是可以不用getters25、vuex的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?
27. Der Unterschied zwischen dem bidirektionalen Datenbindungsprinzip von Vue, dem Vue2- und dem Vue3-Prinzip
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!