Vue JS data Arrow Functions

Für viele ein Mysterium, für andere die beste moderne JavaScript Notation, die man sich nur vorstellen kann.
Die Rede ist von den ECMA-Script6 Arrow Functions.

 

Was sind Arrow Functions

Der Begriff der “Arrow” oder auch “Pfeil”-Funktionen entstammt dem Umstand, dass diese Funktionen mit einem Pfeil => geschrieben werden.

 

Gegenüberstellung

Wir zeigen zunächst eine allgemein Darstellung einer Vue JS Data Function ohne Arrow Function Notation. Diese Darstellung ist übrigens nach wie vor gültig, funktionsfähig und problemlos nutzbar.

// bekannt, ohne ES6 Arrow Functions
data: function() {
return {
item: {
title: '',
description: '',
}
}
},

Dieselbe Notation eines beliebigen Items wäre in Arrow Function Schreibweise:

// mit ES6 Arrow Functions
data: () => ({
item: {
title: '',
description: '',
}
}),
Man kann im direkten Vergleich sehen, was genau die Arrow Function “eigentlich” macht.
Nämlich zB. das weglassen des “function” Statements. Oder auch das weglassen des “return” Statements.

 

👉🏻 Du hast Lust auf mehr? Mehr VueJs? Dann nutze deine Zeit und komm in deinen Gratis Onlinekurs für VueJs!

Dein kostenfreier VueJs Kurs