Wurde vuejs3 veröffentlicht?

vuejs3 ist veröffentlicht. Am 18. September 2020 wurde Vue.js3.0 offiziell veröffentlicht; die vue3.0-Version unterscheidet sich völlig von anderen Versionen. Sie minimiert die Anzahl der Konfigurationsvorgänge durch Entwickler und fügt viele umfangreiche integrierte Funktionen hinzu Eine vollständige GUI zum Erstellen und Verwalten von Projekten.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

Am 18. September 2020 wurde Vue.js 3.0 offiziell veröffentlicht.

Geschichte:

• Version 3.0 repräsentiert über 2 Jahre Entwicklungsarbeit

• mit über 30 RFCs

• 2600+ Commits

• von 99 Mitwirkenden

• 628 Pull-Anfragen

• Viel Entwicklungs- und Dokumentationsarbeit

Leistungsoptimierung:

• Route Lazy Loading

• Keep-Alive zwischengespeicherte Seiten

• Verwenden Sie v-show, um DOM wiederzuverwenden

• v-für Durchquerung vermeidet die gleichzeitige Verwendung von v-if Komponenten werden als Funktionskomponenten markiert

• Aufteilung von Unterkomponenten

• Variable Lokalisierung

• SSR

• Vue 3.2 ist ebenfalls veröffentlicht!

• You Yuxi, der Gründer des Vue-Frameworks, kündigte die Vue 3.2-Version im offiziellen Blog an und kommentierte seinen persönlichen sozialen Account:

• Werfen wir einen Blick auf die lang erwarteten neuen Funktionen des neuen Version.

Vue 3.2 enthält viele wichtige neue Funktionen und Leistungsverbesserungen. Kurz nach der Veröffentlichung der neuen Version wurde ein weiteres Vue 3.2.1-Update zum offiziellen CHANGELOG hinzugefügt, das lediglich einen Bugfix aktualisierte.

• Zwei neue Mitglieder von SFC sind erfolgreich reguläre Mitglieder geworden

• Zwei neue Funktionen von Einzeldateikomponenten (SFCs, auch bekannt als .vue-Dateien) haben erfolgreich vom experimentellen Status in den stabilen Status übergegangen:

: Die neue Kompilierungssyntax von Sugar, kurz Skript-Setup, entspricht dem Einfügen des Codes in die Setup-Funktion beim Kompilieren und Ausführen und dem anschließenden Definieren der exportierten Variablen im Kontext und Einbinden in das zurückgegebene Objekt;

<style></style>: Das heißt, einige CSS-Inline-Stile können im <style></style>-Tag gebunden werden.

Das Folgende ist eine Fallkomponente, die diese beiden Funktionscodes zusammen verwendet:

<script>import { ref } from &#39;vue&#39;const color = ref(&#39;red&#39;)</script><template>
  <button>
    Color is: {{ color }}
  </button></template><style>button {
  color: v-bind(color);}</style>

Interessierte Schüler können es im SFC Playground ausprobieren oder die offizielle Dokumentation lesen:

https://v3.vuejs.org / api/sfc-script-setup.html

https://v3.vuejs.org/api/sfc-style.html#state-driven-dynamic-css

Darüber hinaus basiert Vue offiziell auf <script setup></script> hat auch einen neuen RFC erstellt, der darauf abzielt, die Ref-Erfahrung durch den Compiler zu verbessern, Erfahrungs-Feedback-Adresse: https://github.com/vuejs/rfcs/discussions/369

Web Components

• Vue 3.2 führt eine neue defineCustomElement-Methode ein, um mithilfe der Vue-Komponenten-API einfach native benutzerdefinierte Elemente zu erstellen: ：新的编译语法糖，简而言之就是 script setup 相当于在编译运行时把代码放到了 setup 函数中运行，然后把导出的变量定义到上下文中，并包含在返回的对象中；
• <style> v-bind</style>：即在SFC的 <style></style> 标签里可以绑定一些CSS内联样式。

下面是一起使用这两个功能代码的案例组件：

import { defineCustomElement } from 'vue'const MyVueElement = defineCustomElement({
  // normal Vue component options here})// Register the custom element.// After registration, all `<my-vue-element>` tags// on the page will be upgraded.customElements.define('my-vue-element', MyVueElement)</my-vue-element>

感兴趣的同学可以在SFC Playground 中尝试一番，或者阅读官方文档：

• https://v3.vuejs.org/api/sfc-script-setup.html

• https://v3.vuejs.org/api/sfc-style.html#state-driven-dynamic-css

此外，Vue官方基于<script setup></script>还构建了新的RFC，旨在通过编译器改善ref体验，体验反馈地址：https://github.com/vuejs/rfcs/discussions/369

Web 组件

Vue 3.2 引入了一个新的 defineCustomElement 方法，可以使用 Vue 组件 API 轻松创建原生自定义元素：

rrreee

该API允许开发者创建Vue驱动的UI组件库，这些库可以单独使用或者与其他框架同时使用，具体如何使用，大家可以参考官方文档：https://v3.vuejs.org/guide/web-components.html

性能提升

• 对反应系统进行重大优化，感谢@basvanmeurs的出色表现

• 更高效的ref实现（约 260% 的读取速度/约 50% 的写入速度）

  • 约 40% 更快的依赖跟踪
  • 内存使用量减少约 17%

• 模板编译器改进：

• 创建普通元素 VNode 的速度提升约 200%

• 更为积极的连续 hoisting

最后，该版本还提供了可实现部分记忆模板树功能的 v-memo 新指令，该指令不但允许 Vue 可以完全跳过新的 VNode 创建步骤，还可以跳过虚拟 DOM 差异。虽然可使用的地方不多，但在特殊情况下可压榨最大性能，例如处理大型 v-for 列表。

使用简单的单行添加，v-meno 使 Vue 成为 js-framework-benchmark 中最快的主流框架：

Vue官博

服务端渲染

该版本的@vue/server-rendererrrreee

Mit dieser API können Entwickler Vue-gesteuerte UI-Komponentenbibliotheken erstellen. Diese Bibliotheken können einzeln oder zusammen mit anderen Frameworks verwendet werden. Einzelheiten zu ihrer Verwendung finden Sie in der offiziellen Dokumentation: https://v3.vuejs.org/guide/web-components.html🎜

Leistung Verbesserung

🎜🎜🎜Wichtige Optimierungen am reaktiven System, danke an @basvanmeurs für seine großartige Arbeit🎜🎜🎜🎜Effizientere Ref-Implementierung (~260 % ​​Lesegeschwindigkeit / ~50 % Schreibgeschwindigkeit) 🎜🎜🎜~40 % schnellere Abhängigkeitsverfolgung🎜🎜Speicherverbrauch um ca. 17 % reduziert🎜🎜🎜🎜🎜Verbesserungen des Vorlagen-Compilers: 🎜🎜🎜🎜Das Erstellen gewöhnlicher Element-VNodes ist ca. 200 % schneller🎜🎜🎜🎜Aggressiveres kontinuierliches Heben🎜🎜🎜 🎜 Endlich diese Version stellt außerdem eine neue v-memo-Direktive bereit, die einen Teil der Speichervorlagenbaumfunktion implementieren kann. Diese Direktive ermöglicht es Vue nicht nur, den neuen VNode-Erstellungsschritt vollständig zu überspringen, sondern überspringt auch virtuelle DOM-Unterschiede. Obwohl es nicht an vielen Stellen verwendet wird, kann es in besonderen Fällen verwendet werden, um die maximale Leistung zu erzielen, beispielsweise bei der Verarbeitung großer V-for-Listen. 🎜🎜Durch eine einfache einzeilige Addition macht v-meno Vue zum schnellsten Mainstream-Framework im js-framework-benchmark:
🎜Vue offizieller Blog

Serverseitiges Rendering

🎜Die Version Das Paket @vue/server-renderer stellt eine ES-Modulkonstruktion bereit, die von den in Node.js integrierten Modulen entkoppelt werden kann. Dadurch kann @vue/server-renderer gebündelt und in Nicht-Node.js-Laufzeiten wie CloudFlare Workers oder Service Workers verwendet werden. 🎜

Gleichzeitig verbessert diese Version auch die Streaming-Rendering-API und bietet eine neue Methode für das Web-Streams-API-Rendering. Weitere Informationen finden Sie in der @vue/server-renderer-Dokumentation: https://github.com/vuejs/vue-next/tree/master/packages/server-renderer#streaming-api

Effect Scope API

Vue 3.2 führt außerdem ein neues ein Mit der Effect Scope API kann die Verarbeitungszeit reaktiver Effekte (Berechnungen und Beobachter) direkt gesteuert werden. Es erleichtert die Verwendung der reaktiven API von Vue außerhalb des Komponentenkontexts und erschließt einige erweiterte Anwendungsfälle innerhalb von Komponenten.

Dies ist eine Low-Level-API für Bibliotheksautoren, die detailliertere interne Prinzipien und Fälle im offiziellen RFC finden kann.

Verwandte Links:

• Vue-Änderungsprotokoll: https://github.com/vuejs/vue-next/blob/master/CHANGELOG.md
• Vue offizielles Blog-Versionsupdate: https://blog .vuejs .org/posts/vue-3.2.html

Empfohlenes Lernen: „Javascript-Grundlagen-Tutorial“, „Die neuesten 5 Video-Tutorial-Auswahlen für vue.js“

Das obige ist der detaillierte Inhalt vonWurde vuejs3 veröffentlicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!