Dieses Mal werde ich die häufigsten Fehler von Vue-Anfängern zusammenfassen. Was sind die Vorsichtsmaßnahmen für Vue-Anfänger, um die häufigsten Fehler zu beheben? sehen.
Das zugrunde liegende Prinzip von Vue?Kommunikation zwischen Vue-Komponenten? Wie viele Methoden gibt es, um denDatentyp in JS zu bestimmen?
Die gebräuchlichste Bestimmungsmethode: Typ vonMethoden zur Bestimmung bekannter Objekte Typen: Instanz von wird anhand des Konstruktors des Objekts beurteilt: KonstruktorUnbesiegbare und allmächtige Methode: jquery.type()Was ist Der Unterschied zwischen Vue und Angular?
1.vue ist nur die Ansichtsebene in MVVM. Es ist nur eine Toolbibliothek wie JQuery, kein Framework, während Angular das MVVM-Framework ist.2. Die bidirektionale Bindung von Vue basiert auf 3. Getter/Setter in ES5, während Angular einen eigenen Satz von Vorlagenkompilierungsregeln implementiert, die eine sogenannte „schmutzige“ Prüfung erfordern, während dies bei Vue nicht der Fall ist. Daher ist Vue leistungseffizienter, der Preis ist jedoch, dass es von Browsern unter IE9 nicht unterstützt werden kann.
4.vue muss ein EL-Objekt zur Instanziierung bereitstellen, und alle nachfolgenden Bereiche befinden sich ebenfalls unter dem EL-Objekt, während Angular die gesamte HTML-Seite ist. Eine Seite kann mehrere Vue-Instanzen haben, aber Angular scheint auf diese Weise nicht zu funktionieren.
5.vue ist wirklich einfach zu starten und die Lernkosten sind relativ gering. Es gibt jedoch nicht viele Referenzmaterialien. Die offiziellen Dokumente sind relativ einfach und es mangelt an umfassenden Anwendungsfällen. Für eine fortgeschrittene Nutzung müssen Sie den Quellcode zumindest vorerst selbst studieren.
Sagen Sie mir, wie Sie Winkel-Dirty-Checking verstehen?
In Angular können Sie nicht erkennen, ob sich Ihre Daten geändert haben. Daher werden einige Bedingungen festgelegt. Wenn Sie diese Bedingungen auslösen, wird eine Erkennung durchgeführt, um alle Daten zu durchlaufen Änderungen, die Sie vorgenommen haben, und führen Sie die Änderungen dann aus.Dieser Test ist sehr unwissenschaftlich. Und die Effizienz ist nicht hoch, es gibt viele überflüssige Stellen, daher wird es offiziell als Dirty Check bezeichnet.
active-class ist ein Attribut welcher Komponente?
Die Router-Link-Komponente des Vue-Router-Moduls.Wie definiere ich verschachteltes Routing?
In tatsächlichen Projekten werden wir auf mehrere Ebenen verschachtelter Komponenten stoßen, aber wie implementieren wir verschachteltes Routing? Daher müssen wir die Kinderkonfiguration in den Parametern von VueRouter verwenden, damit die Routenverschachtelung gut implementiert werden kann. index.html, es gibt nur einen Routing-Ausgang<p id="app"> <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </p>
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) //引入两个组件 import home from "./home.vue" import game from "./game.vue" //定义路由 const routes = [ { path: "/", redirect: "/home" },//重定向,指向了home组件 { path: "/home", component: home, children: [ { path: "/home/game", component: game } ] } ] //创建路由实例 const router = new VueRouter({routes}) new Vue({ el: '#app', data: { }, methods: { }, router })
<template> <p> <h3>首页</h3> <router-link to="/home/game"> <button>显示<tton> </router-link> <router-view></router-view> </p> </template>
<template> <h3>游戏</h3> </template>
Welche Art von Navigations-Hooks hat der Vue-Router?
Drei Typen, Der erste: Es ist der globale Navigations-Hook: router.beforeEach(to,from,next), seine Funktion besteht darin, zu beurteilen und abzufangen vor dem Springen.Der zweite Typ: Hooks innerhalb von Komponenten
Der dritte Typ: separates Routing exklusiver Komponenten
Zu verwendende Schritte:
Schritt 1: Verwenden Sie npm, um drei Loader herunterzuladen (Sass-Loader, CSS-Loader, Node-Sass). Schritt 2: Suchen Sie webpack.base.config.js im Build-Verzeichnis und fügen Sie eine extension.scss zum Attribut „extends“ hinzu.Schritt 3: Konfigurieren Sie immer noch in derselben Datei ein Modul AttributSchritt 4: Fügen Sie dann das lang-Attribut zum Style-Tag der Komponente hinzu, zum Beispiel: lang="scss"Was sind die Hauptfunktionen:
1. Sie können Variablen verwenden, wie zum Beispiel ($variable name = value);
2. Sie können Mixer verwenden, wie zum Beispiel ()
3 mint-ui ? Wie benutzt man? Nennen Sie mindestens drei Einsatzmöglichkeiten von Komponenten?
Vue-basierte Front-End-Komponentenbibliothek. npm-Installation, dann Stile und js importieren, vue.use (mintUi) wird global eingeführt. Lokal eingeführt in einer einzigen Komponente: {Toast} aus „mint-ui“ importieren.
Komponente eins: Toast („Anmeldung erfolgreich“);
Komponente zwei: Mint-Header;Komponente drei: Mint-Swiper
Was ist V-Modell? Wie benutzt man? Wie binde ich Ereignisse an Tags in Vue?
Kann bidirektionale Bindung und Anweisungen realisieren (v-class, v-for, v-if, v-show, v-on). Das Datenattribut der Modellebene von vue. Bindungsereignis:
Was sind die Vor- und Nachteile von iframe? iframe wird auch als eingebetteter Frame bezeichnet. Er ähnelt einer gerahmten Webseite. Er kann den Frame und den Inhalt einer Webseite in eine vorhandene Webseite einbetten.
Vorteile:
Lösen Sie Ladeprobleme für langsam ladende Inhalte von Drittanbietern wie Symbole und Anzeigen
Sicherheitssandbox
Parallele Ladeskripte
Einfach zu erstellende Navigationsleiste
Nachteile:
iframe blockiert das Onload-Ereignis der Hauptseite
Selbst wenn der Inhalt leer ist, dauert das Laden einige Zeit
Keine Semantik
Sass und Less kurz beschreiben und die Unterschiede erklären?
Es handelt sich um dynamische Stilsprachen, CSS-Präprozessoren und eine Abstraktionsschicht auf CSS. Sie werden mithilfe einer speziellen Syntax/Sprache in CSS kompiliert.
Die Variablensymbole sind unterschiedlich, weniger ist @ und Sass ist $;
Sass unterstützt bedingte Anweisungen, Sie können if{}else{}, for{}-Schleifen usw. verwenden. Less unterstützt es nicht;
Sass basiert auf Ruby und wird auf der Serverseite verarbeitet, während Less less.js einführen muss, um den Less-Code zu verarbeiten und CSS an den Browser auszugeben
Was sind Axios? Wie benutzt man? Beschreiben Sie den Prozess der Verwendung zur Implementierung der Anmeldefunktion?
Modul, das Hintergrundressourcen anfordert. npm install axios -S wird installiert und dann über Domänen hinweg gesendet, was in config/index.js in der
Konfigurationsdateifestgelegt werden muss. Wenn der Hintergrund Tp5 ist, definieren Sie eine Ressourcenroute. Verwenden Sie import in js und dann .get oder .post. Wenn es erfolgreich ist, wird es in der .then-Funktion zurückgegeben, wenn es fehlschlägt, wird es in der .catch-Funktion zurückgegeben Was ist bei der Weiterentwicklung von axios+tp5 der Vorgang, axios.post(' aufzurufen? api/user‘)? Was ist mit axios.put(‘api/user/8′)?
Domänenübergreifend,
Benutzer hinzufügen-Vorgang, Aktualisierungsvorgang.
Was ist Vuex? Wie benutzt man? Welches Funktionsszenario verwendet es? Zustandsverwaltung im Vue-Framework. Führen Sie den Store in main.js ein und fügen Sie ihn ein. Ein neuer Verzeichnisspeicher wird erstellt,...exportieren. Zu den Szenarien gehören: Status zwischen Komponenten in einer Single-Page-Anwendung. Musikwiedergabe, Anmeldestatus, zum Warenkorb hinzufügen
Was ist das MVVM-Framework? Was ist der Unterschied zu anderen Frameworks (jquery)? Welche Szenarien sind geeignet? Ein Model+View+ViewModel-Framework, ein Datenmodellmodell und ein ViewModel verbinden zwei
Unterschied: Vue datengesteuert, Anzeige der Ansichtsebene durch Daten statt durch Knotenoperationen .
Szenario: Szenarien mit vielen Datenoperationen, bequemer
Welche Methoden gibt es zum Anpassen von Anweisungen (V-Check, V-Fokus)? Welche Hook-Funktionen hat es? Welche anderen Hooks
Funktionsparameter? Global definierte Direktive: Es gibt zwei Parameter in der Direktivenmethode des Vue-Objekts, einer ist der Direktivenname und der andere ist die Funktion. In der Komponente definierte Anweisungen: Anweisungen
Hook-Funktion: bind (ausgelöst durch Bindungsereignis), insert (ausgelöst, wenn Knoten eingefügt wird), Update (zugehörige Aktualisierungen innerhalb der Komponente)
Hook-Funktionsparameter : el , binding
Mindestens 4 Anweisungen in vue und deren Verwendung nennen?
v-if: Bestimmen Sie, ob die Daten ausgeblendet werden sollen; v-bind:class: Ein Attribut binden; 🎜>
Was ist Vue-Router? Aus welchen Komponenten besteht es?Vue wird zum Schreiben eines Routing-Plug-Ins verwendet. Was sind die Navigations-Hooks für Router-Link und Router-View
? Welche Parameter haben sie?
Zu den Navigations-Hooks gehören:
a/globale Hooks und Hooks, die exklusiv für Komponenten gelten. b/beforeRouteEnter, afterEnter, beforeRouterUpdate, beforeRouteLeave
Parameter:
has to (die zu gehende Route), from (die zu verlassende Route), next (diese Funktion muss zum Gehen verwendet werden). zum nächsten) Eine Route, falls nicht verwendet, abfangen) Die am häufigsten verwendeten sind diese
Was ist das Prinzip der bidirektionalen Datenbindung?
vue.js nutzt Daten-Hijacking in Kombination mit dem Publisher-Subscriber-Modell. Es nutzt Object.defineProperty(), um die Setter und Getter jeder Eigenschaft zu kapern und Nachrichten zu veröffentlichen, wenn sich die Daten ändern. Lösen Sie beim Teilnehmer den entsprechenden Zuhörer-Rückruf aus.Spezifische Schritte:
Schritt 1: Rekursives Durchlaufen der Datenobjekte, die beobachtet werden müssen, einschließlich der Attribute der Unterattributobjekte , und füge sie hinzu Setter und GetterIn diesem Fall löst die Zuweisung eines Werts zu diesem Objekt den Setter aus, und dann können Sie die Datenänderungen überwachen
1. Fügen Sie sich dem Attribut-Abonnenten (dep) hinzu
2. Sie müssen über eine update.()-Methode
verfügen. 3. Wenn Sie von dep.notice() über Attributänderungen benachrichtigt werden, können Sie Ihre eigene update()-Methode aufrufen und den in Compile gebundenen Rückruf auslösen, dann sind Sie fertig.
Bitte erläutern Sie ausführlich Ihr Verständnis des VueLebenszyklus?
Insgesamt 8 Phasen: vor/nach der Erstellung, vor/nach dem Laden, vor/nach dem Update, vor/nach der ZerstörungVor/nach der Erstellung: in In In der Phase beforeCreated sind das Montageelement $el und die Datenobjektdaten der Vue-Instanz beide undefiniert und wurden nicht initialisiert. In der Erstellungsphase sind die Datenobjektdaten der Vue-Instanz verfügbar, $el jedoch nicht. Vor/nach dem Laden: In der beforeMount-Phase werden $el und Daten der Vue-Instanz initialisiert, aber der virtuelle Dom-Knoten davor ist noch gemountet und data.message wurde nicht ersetzt. In der gemounteten Phase wird die Vue-Instanz gemountet und data.message erfolgreich gerendert. Vor/nach dem Update: Wenn sich Daten ändern, werden die Methoden „beforeUpdate“ und „update“ ausgelöst. Vor/nach der Zerstörung: Nach der Ausführung der Zerstörungsmethode lösen Änderungen an den Daten die periodische Funktion nicht mehr aus, was darauf hinweist, dass die Vue-Instanz die Ereignisüberwachung und Bindung an den Dom freigegeben hat, die Dom-Struktur jedoch weiterhin vorhanden ist .Erzählen Sie uns bitte etwas über den Prozess der Kapselung von Vue-Komponenten.
Erstens können Komponenten die Entwicklungseffizienz des gesamten Projekts verbessern. Es kann die Seite in mehrere relativ unabhängige Module abstrahieren, wodurch die Probleme unserer traditionellen Projektentwicklung gelöst werden: geringe Effizienz, schwierige Wartung, Wiederverwendbarkeit und andere Probleme. Verwenden Sie dann die Vue.extend-Methode, um eine Komponente zu erstellen, und verwenden Sie dann die Vue.component-Methode, um die Komponente zu registrieren. Untergeordnete Komponenten erfordern Daten und können Definitionen in Requisiten akzeptieren. Nachdem die untergeordnete Komponente die Daten geändert hat, möchte sie die Daten an die übergeordnete Komponente übergeben. Sie können die Emit-Methode verwenden.Woher kannten Sie vuex?
vuex kann als Entwicklungsmodell oder Framework verstanden werden. Beispielsweise verfügt PHP über Thinkphp, Java über Spring usw. Verwalten Sie Änderungen an Treiberkomponenten zentral über den Status (Datenquelle) (z. B. verwaltet der IOC-Container von Spring Beans zentral).
Was ist Vue-Loader? Welche Verwendungszwecke gibt es?
Ein Loader, der .vue-Dateien analysiert und template/js/style in js-Module konvertiert.
Zweck: js kann in es6 geschrieben werden, der Stil kann scss oder weniger sein, eine Vorlage kann mit Jade hinzugefügt werden usw.
Bitte teilen Sie mir die Verwendung jedes Ordners und jeder Datei im src mit Verzeichnis im vue.cli-Projekt?
Der Ordner „Assets“ dient der Definition von Routing-bezogenen Konfigurationen; „main.js“ ist die Eintragsdatei; 🎜 >Wie verwende ich benutzerdefinierte Komponenten in vue.cli? Sind bei Ihnen Probleme aufgetreten?
Schritt 1: Erstellen Sie Ihre Komponentendatei (smithButton.vue) im Komponentenverzeichnis. Das Skript muss standardmäßig exportiert werden. {
Schritt 2: Importieren Sie es in die Seite (Komponente), die Sie verwenden müssen :smithButton aus '../components/smithButton.vue' importieren
Schritt 3: In das Komponentenattribut der Unterkomponente von vue einfügen, Komponenten:{smithButton}
Schritt 4: Wann Wird in der Vorlagenansicht verwendet,
Sprechen Sie über Ihr Verständnis der Vue.js-Vorlagenkompilierung?
Kurz gesagt, es wird zuerst in einen AST-Baum konvertiert, und dann gibt die resultierende Renderfunktion VNode (den virtuellen DOM-Knoten von Vue) zurück
Detaillierte Schritte: Zuerst wird die Vorlage über den Kompilierungscompiler in einen AST-Syntaxbaum (abstrakter Syntaxbaum, der eine Baumdarstellung der abstrakten Syntaxstruktur des Quellcodes ist) kompiliert von createCompiler, der zum Erstellen des Compilers verwendet wird. Darüber hinaus ist Compile auch für das Zusammenführen von Optionen verantwortlich.
Dann erhält der AST die Renderfunktion durch Generieren (den Prozess der Konvertierung des AST-Syntaxbaums in eine Renderfunktionszeichenfolge). Der Rückgabewert von Render ist VNode, der virtuelle DOM-Knoten von Vue. Enthält (Labelname, Unterknoten, Text usw.)
Vue-VerlaufsdatensatzVerlauf Wie viele Schritte vorwärts oder rückwärts in the record
Was ist der Unterschied zwischen Vuejs, AngularJS und React? 1. Unterschiede zu AngularJS
Gleiche Punkte:
beide unterstützen Anweisungen: integrierte Anweisungen und benutzerdefinierte Anweisungen.
Beide unterstützen Filter: integrierte Filter und benutzerdefinierte Filter.
beide unterstützen die bidirektionale Datenbindung.
Keiner von beiden unterstützt Low-End-Browser.
Unterschiede:
1. AngularJS hat einen hohen Lernaufwand, wie zum Beispiel die Hinzufügung der Dependency-Injection-Funktion, während die von Vue.js selbst bereitgestellten APIs relativ einfach und intuitiv sind.
2. In Bezug auf die Leistung ist AngularJS auf eine schmutzige Überprüfung der Daten angewiesen. Je mehr Beobachter es gibt, desto langsamer wird es.
Vue.js verwendet eine auf Abhängigkeitsverfolgung basierende Beobachtung und asynchrone Warteschlangenaktualisierungen. Alle Daten werden unabhängig voneinander ausgelöst.
Bei großen Anwendungen ist dieser Optimierungsunterschied ziemlich offensichtlich.
2. Unterschiede zu React
Ähnliche Punkte:
React verwendet eine spezielle JSX-Syntax und Vue.js empfiehlt auch das Schreiben des speziellen Dateiformats .vue in der Komponentenentwicklung Es gibt einige Konventionen zum Dateiinhalt und beide müssen vor der Verwendung kompiliert werden.
Die Grundidee ist dieselbe: Alles ist eine Komponente und Komponenteninstanzen können verschachtelt werden.
alle bieten vernünftige Hook-Funktionen, sodass Entwickler ihre Bedürfnisse anpassen können.
verfügt nicht über integrierte AJAX-, Route- und andere Funktionen im Kernpaket, sondern wird als Plug-in geladen.
Unterstützt Mixins-Funktionen bei der Komponentenentwicklung.
Unterschiede:
React basiert auf Virtual DOM, während Vue.js DOM-Vorlagen verwendet. Das von React verwendete virtuelle DOM führt Dirty-Checks für die gerenderten Ergebnisse durch.
Vue.js bietet in der Vorlage Anweisungen, Filter usw., mit denen das DOM sehr bequem und schnell bedient werden kann.
Fragen zum Vorstellungsgespräch zum Vue-Lebenszyklus
Was ist der Vue-Lebenszyklus? Der Prozess von der Erstellung bis zur Zerstörung einer Vue-Instanz ist der Lebenszyklus. Das heißt, eine Reihe von Prozessen vom Erstellen über das Initialisieren von Daten, das Kompilieren von Vorlagen, das Mounten von Dom → Rendern, Aktualisieren → Rendern, Deinstallieren usw. Wir nennen dies den Lebenszyklus von Vue.
Welche Rolle spielt der Vue-Lebenszyklus?
Es verfügt über mehrere Ereignis-Hooks in seinem Lebenszyklus, was es uns erleichtert, bei der Steuerung des Prozesses der gesamten Vue-Instanz eine gute Logik zu entwickeln.
Wie viele Phasen gibt es im Vue-Lebenszyklus?
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
Welche Hooks werden beim ersten Laden der Seite ausgelöst?
Die Hooks „beforeCreate“, „created“, „beforeMount“ und „mounted“ werden ausgelöst, wenn die Seite zum ersten Mal geladen wird
In welchem Zyklus wird das DOM-Rendering abgeschlossen?
DOM-Rendering wurde in gemountet abgeschlossen
Beschreiben Sie kurz, für welche Szenarien jeder Zyklus geeignet ist?
Einige Möglichkeiten, Lebenszyklus-Hooks zu verwenden: beforecreate: Hier können Sie ein Ladeereignis hinzufügen, das ausgelöst wird, wenn die Instanz geladen wird. erstellt: Das Ereignis, wenn die Initialisierung abgeschlossen ist, wird hier geschrieben , wie zum Beispiel hier enden Zum Laden von Ereignissen eignen sich auch asynchrone Anforderungen, die hier aufgerufen werden können: Mounten Sie Elemente und erhalten Sie aktualisierte DOM-Knoten: Wenn die Daten einheitlich verarbeitet werden, schreiben Sie hier die entsprechende Funktion vorherZerstören: Sie können ein Bestätigungsfeld erstellen, um das zu bestätigen Ereignis stoppen nextTick: Nach der Aktualisierung der Daten Sofort dom bedienen
arguments ist ein Pseudo-Array, es gibt keine Traversal-Schnittstelle und kann nicht durchlaufen werden
Was sind und die Unterschiede zwischen Cancas und SVG
SVG
SVG ist eine Sprache, die XML zur Beschreibung von 2D-Grafiken verwendet.
SVG basiert auf XML, was bedeutet, dass jedes Element im SVG-DOM verfügbar ist. Sie können einem Element einen JavaScript-Ereignishandler anhängen.
In SVG wird jede gezeichnete Form als Objekt betrachtet. Ändern sich die Eigenschaften eines SVG-Objekts, kann der Browser die Grafik automatisch reproduzieren.
Canvas
Canvas zeichnet 2D-Grafiken über JavaScript.
Leinwand wird Pixel für Pixel gerendert.
Sobald eine Grafik im Canvas gezeichnet ist, erregt sie nicht mehr die Aufmerksamkeit des Browsers. Wenn sich die Position ändert, muss die gesamte Szene neu gezeichnet werden, einschließlich aller Objekte, die möglicherweise von Grafiken verdeckt wurden.
Vergleich von Canvas und SVG
Canvas
Auflösungsabhängig
Unterstützt keine Event-Handler
Schwache Textwiedergabefunktionen
Möglichkeit, das resultierende Bild im .png- oder .jpg-Format zu speichern
Ideal für grafikintensive Spiele, bei denen viele Objekte häufig neu gezeichnet werden
SVG
Unabhängig von Auflösung
Unterstützt Ereignishandler
Ideal für Anwendungen mit großen Renderbereichen (z. B. Google Maps)
Hohe Komplexität verlangsamt das Rendern (jede Anwendung, die das DOM übermäßig nutzt, wird unzufrieden sein)
Nicht für Spiele geeignet Anwendungen
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
So deaktivieren Sie die Eslint-Code-Überprüfung im Vue-Projekt
JS-Zusammenfassung des Durchlaufens unregelmäßiger Multi- dimensionale Array-Methoden
Das obige ist der detaillierte Inhalt vonZusammenfassung häufiger Fehler von Vue-Anfängern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!