Skip to content

Commit

Permalink
feat(tutorial): remove oversize picture
Browse files Browse the repository at this point in the history
  • Loading branch information
robinboehm authored Mar 26, 2024
1 parent 80e76c9 commit aaed3a0
Show file tree
Hide file tree
Showing 2 changed files with 1 addition and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: "Vue 3 Tutorial für Einsteiger"
description: "Einsteiger Tutorial für das Javascript Framework Vue.js in Version 3. Schritt für Schritt erklären wir dir die Konzepte und Verbesserungen der Composition API."
author: "Antony Konstantinidis"
published_at: 2020-09-01 16:00:00.000000Z
published_at: 2024-03-26 16:00:00.000000Z
categories: "tutorial vuejs typescript"
tutorial_page_order: '1'
---
Expand Down Expand Up @@ -72,10 +72,6 @@ Zusätzlich dazu existieren noch eine Vielzahl sogenannter _Lifecycle_-Methoden,
Aufgrund dieser Einteilung sind Komponenten mit steigender Größe schwer zu lesen, da man häufig zwischen den einzelnen Abschnitten hin und her springt, um die Funktionsweise nachvollziehen zu können.
Ein weiterer Nachteil dieser Organisation ist, dass sie die Wiederverwendung von Code erschwert, da ein Feature über die gesamte Datei verstreut sein kann. Es existieren zwar diverse Lösungsmöglichkeiten, welche aber wiederum eigene Nachteile mit sich bringen.

Die [offizielle Vue Dokumentation](https://vuejs.org/guide/extras/composition-api-faq.html#better-logic-reuse){:target="_blank"} enthält dieses ausgezeichnete Diagramm, welches die Zusammengehörigkeit verschiedener Features in derselben Komponente durch die Verwendung unterschiedlicher Farben sichtbar macht:

<a href="https://vuejs.org/guide/extras/composition-api-faq.html#better-logic-reuse" target="_blank"><img class="img-fluid center img-rounded" src="component-feature-structure.png" alt="Die Zusammengehörigkeit verschiedener Features in derselben Komponente durch die Verwendung verschiedener Farben sichtbar gemacht."></a>

Als weiterer wichtiger Punkt ist der aktuelle TypeScript-Support zu nennen. Die Options API beruht auf einer Menge "Magie" des Vue-Compilers, wodurch sich die Verwendung von `this` innerhalb von Komponenten nur sehr schwierig mit TypeScript verbinden lässt.
Die Composition API ist aufgrund Ihrer Struktur und Simplizität frei von diesen Nachteilen, sodass sie sich wie in JavaScript erwartet verhält. Dies ermöglicht eine viel bessere TypeScript-Unterstützung bei der Verwendung der Composition API.

Expand Down
Binary file not shown.

0 comments on commit aaed3a0

Please sign in to comment.