Vue.js - Composition API

Ziele

Das Ziel dieser Vue Composition API Agenda ist es, den Teilnehmern ein tiefes Verständnis der Composition API in Vue.js zu vermitteln. Sie sollen in der Lage sein, die Vorteile und Unterschiede zwischen der Composition API und der Options API zu verstehen und die Composition API zur Erstellung von komplexen, wiederverwendbaren und einfach zu testenden Vue-Komponenten und -Anwendungen zu nutzen. Die Agenda deckt die wichtigsten Konzepte und Funktionen der Composition API ab und führt die Teilnehmer durch eine schrittweise Entwicklung von Anwendungen mit der Composition API.

Zielgruppe

Web-Entwickler

Voraussetzungen

Solide Vue.js Kenntnisse

Agenda

Einführung in die Composition API in Vue.js

• Was ist die Composition API?
• Warum wurde die Composition API entwickelt?
• Wie funktioniert die Composition API im Vergleich zur Options API?

Einrichten der Composition API in Vue.js

• Installation von Vue.js 3
• Konfiguration der Composition API in Vue.js 3
• Einrichten einer Entwicklungsumgebung für die Composition API

Verwendung von Setup in Vue-Komponenten

• Einführung in das Setup in Vue-Komponenten
• Unterschiede zwischen Data, Methods und Computed in der Options API und in der Composition API
• Verwendung von Reactive-Properties in der Composition API

Verwendung von Refs und Reactive-Properties in der Composition API

• Einführung in Refs und Reactive-Properties
• Unterschiede zwischen Refs und Reactive-Properties
• Verwendung von Refs und Reactive-Properties in Vue-Komponenten

Verwendung von Computed-Properties in der Composition API

• Einführung in Computed-Properties in der Composition API
• Unterschiede zwischen Computed-Properties in der Options API und in der Composition API
• Verwendung von Computed-Properties in Vue-Komponenten

Verwendung von Watchern in der Composition API

• Einführung in Watcher in der Composition API
• Unterschiede zwischen Watchern in der Options API und in der Composition API
• Verwendung von Watchern in Vue-Komponenten

Verwendung von Lifecycle-Hooks in der Composition API

• Einführung in Lifecycle-Hooks in der Composition API
• Unterschiede zwischen Lifecycle-Hooks in der Options API und in der Composition API
• Verwendung von Lifecycle-Hooks in Vue-Komponenten

Verwendung von Custom Hooks in der Composition API

• Einführung in Custom Hooks in der Composition API
• Erstellung von Custom Hooks für die Wiederverwendung von Logik
• Verwendung von Custom Hooks in Vue-Komponenten

Verwendung von Providers und Inject in der Composition API

• Einführung in Providers und Inject in der Composition API
• Unterschiede zwischen Providers und Inject in der Options API und in der Composition API
• Verwendung von Providers und Inject in Vue-Komponenten

Verwendung von Reactive-Mutationen in der Composition API

• Einführung in Reactive-Mutationen in der Composition API
• Verwendung von Reactive-Mutationen in Vue-Komponenten
• Unterschiede zwischen Reactive-Mutationen in der Options API und in der Composition API

Verwendung von Setup-Context in der Composition API

• Einführung in das Setup-Context in der Composition API
• Verwendung des Setup-Contexts für den Zugriff auf Routen, Store und weitere Funktionen
• Verwendung von Setup