Vue zugrunde liegende Prinzipien und Komponentenkommunikation

Dieses Mal werde ich Ihnen die Kommunikation zwischen den zugrunde liegenden Prinzipien und Komponenten von Vue vorstellen. Was sind die Vorsichtsmaßnahmen für die Kommunikation zwischen den zugrunde liegenden Prinzipien und Komponenten von Vue? Hier ist ein praktischer Fall.

Das zugrunde liegende Prinzip von Vue?

Kommunikation zwischen Vue-Komponenten?

Wie viele Methoden gibt es, um den Datentyp in JS zu bestimmen?

Die gebräuchlichste Methode zur Bestimmung: typeof

Die Methode zur Bestimmung des Typs eines bekannten Objekts: Instanz von

Beurteilen Sie anhand des Konstruktors des Objekts: Konstruktor

Unbesiegbare 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 Werkzeugbibliothek 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 der Lernaufwand ist 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 redundante 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>

main.js, die Umleitung des Routings zeigt aufgrund der Umleitungspunkte die Home-Komponente an, sobald die Seite geladen wird zur Home-Komponente, und der Umleitungspunkt muss mit dem Pfadpunkt übereinstimmen. Es gibt Unterrouten innerhalb von Unterrouten. Natürlich können Unterrouten auch in Unterrouten verschachtelt sein.

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 
})

home.vue, klicken Sie auf „Anzeigen“, um die Unterroute anzuzeigen. Der Ausgang der Unterroute muss sich in der übergeordneten Route befinden, andernfalls kann die Unterroute nicht angezeigt werden.

<template> 
  <p> 
    <h3>首页</h3> 
    <router-link to="/home/game"> 
      <button>显示<tton> 
    </router-link> 
    <router-view></router-view> 
  </p> 
</template>

game.vue

 <template> 
  <h3>游戏</h3> 
</template>

Wie definiere ich dynamisches Routing von Vue-Router? Wie erhalte ich die übergebenen dynamischen Parameter?

Fügen Sie in der Datei index.js im Router-Verzeichnis /:id zum Pfadattribut hinzu.

Verwenden Sie die params.id des Router-Objekts.

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

Was ist scss? Was sind die Installations- und Nutzungsschritte in vue.cli? Was sind seine Hauptmerkmale?

Vorkompilierung von CSS.

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 Attribut

Schritt 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 wie ($Variablenname = Wert) verwenden.
3

Was ist 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 einzelnen 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 Frame-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 serverseitig 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 der Konfigurationsdatei config/index.js festgelegt 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 die Operation zum Aufrufen von axios.post(' api/user‘)? Was ist mit axios.put(‘api/user/8′)?

Domänenübergreifend, Benutzervorgänge hinzufügen, Vorgänge aktualisieren.

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 Möglichkeiten gibt es, Anweisungen anzupassen (V-Check, V-Fokus)? Welche Hook-Funktionen hat es? Was sind die anderen Hook-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?

Navigations-Hooks sind:

a/Globale Haken und Haken exklusiv für Komponenten. 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 von Vue?

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 Getter
In diesem Fall löst die Zuweisung eines Werts zu diesem Objekt den Setter aus, und dann können Sie die Datenänderungen überwachen

Zweiter Schritt: Kompilieren analysiert die Vorlagenanweisungen und konvertiert die Variablen in der Vorlage Ersetzen Sie sie durch Daten, initialisieren Sie dann die Rendering-Seitenansicht, binden Sie die Aktualisierungsfunktion an den Knoten, der jeder Anweisung entspricht, und fügen Sie Abonnenten hinzu, um die Daten zu überwachen. Sobald sich die Daten ändern, erhalten Sie eine Benachrichtigung und aktualisieren die Ansicht

Schritt 3: Watcher-Abonnenten sind die Brücke der Kommunikation zwischen Observer und Compile. Die wichtigsten Aufgaben sind:
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.

Schritt 4: Als Eingang zur Datenbindung integriert MVVM Observer, Compile und Watcher, verwendet Observer zum Überwachen von Änderungen in seinen eigenen Modelldaten, verwendet Compile zum Parsen und Kompilieren von Vorlagenanweisungen und verwendet schließlich Watcher zum Festlegen up Die Kommunikationsbrücke zwischen Observer und Compile erreicht den bidirektionalen Bindungseffekt von Datenänderungen -> Aktualisierungen anzeigen; interaktive Änderungen anzeigen (Eingabe) -> Datenmodelländerungen.

Bitte erläutern Sie ausführlich Ihr Verständnis des Vue-Lebenszyklus?

Insgesamt 8 Stufen vor/nach der Erstellung, vor/nach dem Laden, vor/nach dem Update, vor/nach der Zerstörung

Vor/nach der Erstellung: im Vor der Erstellungsstufe 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).

Der Status auf Anwendungsebene ist im Speicher konzentriert. Die Möglichkeit, den Status zu ändern, besteht darin, Mutationen einzureichen. Dies ist eine synchrone Sache, die in Aktionen gekapselt werden sollte.

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 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 die Komponenteneigenschaft der Unterkomponente von vue einfügen, Komponenten:{smithButton}

Schritt 4: Wann in der Vorlagenansicht verwendet,

Das Problem ist: Benennung von smithButton, wenn es verwendet wird, ist es smith-button.

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, Initialisieren von Daten, Kompilieren von Vorlagen, 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 hinzufügen.
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 Rendering-Bereichen (z. B. Google Maps)
Hohe Komplexität verlangsamt das Rendern (jede Anwendung, die das DOM übermäßig nutzt, wird unangenehm)
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 zum PHP-Chinesen Webseite!

Empfohlene Lektüre:

Wie NodeJS+MySQL die Datenbank betreibt

So verwenden Sie Webpack+Vue-Umgebungs-LAN

Das obige ist der detaillierte Inhalt vonVue zugrunde liegende Prinzipien und Komponentenkommunikation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!