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:
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.
-
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 'vue'const color = ref('red')</script><template>
<button>
Color is: {{ color }}
</button></template><style>button {
color: v-bind(color);}</style>Nach dem Login kopieren
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:
-
<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>Nach dem Login kopieren
感兴趣的同学可以在SFC Playground 中尝试一番，或者阅读官方文档：
此外，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
性能提升
最后，该版本还提供了可实现部分记忆模板树功能的 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!
