Heim  >  Artikel  >  Web-Frontend  >  Was ist der Unterschied zwischen vue3.0 und vue2.0?

Was ist der Unterschied zwischen vue3.0 und vue2.0?

青灯夜游
青灯夜游Original
2020-11-18 15:01:59112624Durchsuche

Unterschied: Unabhängig davon, wie groß die Daten in vue2.0 sind, wird zu Beginn ein Beobachter dafür erstellt, was beim Laden der Seite zu offensichtlichem Leistungsdruck führen kann. Vue3.0 erstellt nur Beobachter für „die Daten, die zum Rendern des ersten sichtbaren Teils verwendet werden“, und die Beobachter von vue3.0 sind effizienter.

Was ist der Unterschied zwischen vue3.0 und vue2.0?

Der Unterschied zwischen vue3.0 und 2.0

Vue-cli3.0 wurde am 11. August offiziell veröffentlicht. Nach dem Lesen der Kommentare ist die Kompatibilität nicht sehr gut Befehle, nein Besonders optimistisch

Im Vergleich zu vue2.0 hat die Veröffentlichung von vue3.0 die Hauptvorteile: schneller, kleiner, einfacher zu warten, einfacher zu nativieren und einfacher für Entwickler;

schneller
1. Virtuell DOM ist komplett neu geschrieben, das Mounten und Patchen ist 100 % schneller; 2. Mehr Kompilierzeit-Erinnerungen, um den Laufzeitaufwand zu reduzieren; 3. Basierend auf dem Proxy-Beobachtermechanismus, um eine vollständige Sprachabdeckung und bessere Leistung zu gewährleisten; und schnelleren nativen Proxy verwenden;
5. Geschwindigkeit der Komponenteninstanz um die Hälfte erhöht


kleiner
2. Neu Kernlaufzeit: ~ 10 KB gzipped; install -g vue@cli

delete Vue -Liste

Create Project Vue create

Start Project NPM Run Serve

  • Die Standard -Projektverzeichnisstruktur wird auch gegründet:

  • Entfernen Sie die Konfigurationsdateiverzeichnis, Konfigurations- und Build-Ordner

  • Der statische Ordner wurde entfernt, ein neuer öffentlicher Ordner hinzugefügt und index.html nach „public“

  • in der src-Datei verschoben. Dem Ordner wurde ein neuer Ordner „views“ hinzugefügt zum Klassifizieren von Ansichtskomponenten und öffentlichen Komponenten.

  • Installieren

  • npm install -g vue@cli
  • Projektdatei erstellen:

    vue create project //项目的名称
  • ======================
  • Der Unterschied zwischen vue2 und vue3
  • 1. Häufig verwendete Befehle

    vue -V zum Anzeigen der lokalen Vue-Version
2. Offizielle Dokumentation

3.0: https://cli.vuejs.org/zh/ 3. Dateien erstellen

3.0: vue create Geben Sie den Projektordner ein, Projekt erstellen.

2.0: vue init webpack

4. Starten Sie das Projekt.


3.0 startet NPM Run Serve Das Knotenmodell wird während des Projekts automatisch heruntergeladen.

Erstellen Sie eine vue.config.js im Stammverzeichnis

module.exports = {
 baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',
 // outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'
 // outputDir: 'dist',
 // pages:{ type:Object,Default:undfind }
 devServer: {
 port: 8888, // 端口号
 host: 'localhost',
 https: false, // https:{type:Boolean}
 open: true, //配置自动启动浏览器
 // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
 proxy: {
 '/api': {
 target: &#39;<url>&#39;,
 ws: true,
 changeOrigin: true
 },
 &#39;/foo&#39;: {
 target: &#39;<other_url>&#39;
 }
 }, // 配置多个代理
 }
 }

====================

Der Unterschied zwischen Vue3.0 und Vue2.0

1 Führen Sie standardmäßig eine verzögerte Beobachtung durch.

In Version 2.x werden zu Beginn Beobachter dafür erstellt, egal wie groß die Daten sind. Wenn die Datenmenge groß ist, kann dies zu einem erheblichen Leistungsdruck beim Laden der Seite führen. In Version 3.x werden Beobachter nur für „Daten erstellt, die zum Rendern des ersten sichtbaren Teils verwendet werden“, und 3.x-Beobachter sind effizienter.

2. Genauere Änderungsbenachrichtigungen.

Proportional gesehen: Wenn Sie in Version 2.x Vue.set verwenden, um einem Objekt eine Eigenschaft hinzuzufügen, werden alle Beobachter dieses Objekts erneut ausgeführt, in Version 3.x nur die Beobachter, die von dieser Eigenschaft abhängen wird erneut ausgeführt.

3. 3.0 hat neu Unterstützung für TypeScript und PWA hinzugefügt

Einige Befehle haben sich geändert:

Npm install -g vue@cli herunterladen und installieren

Vue-Liste löschen

Projekt vue create erstellen

Projekt starten npm runserve

5. Die Standardprojektverzeichnisstruktur hat sich ebenfalls geändert:

Das Konfigurationsdateiverzeichnis, die Ordner config und build wurden entfernt.

Der statische Ordner wurde entfernt, ein öffentlicher Ordner wurde hinzugefügt und index.html wurde in die Öffentlichkeit verschoben. Einen Ordner „views“ im src-Ordner zur Klassifizierung von Ansichtskomponenten und öffentlichen Komponenten hinzugefügt Empfehlung: Die neuesten 5 vue.js-Video-Tutorial-Auswahlen im Jahr 2020

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Programmierunterricht

! !

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen vue3.0 und vue2.0?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn