Différence de syntaxe?

Bonjour,

En étudiant divers projets Vue.js j’ai remarqué deux manières de déclarer les data dans les composants.

Parfois je vois ceci:

data () {
return {
message: ‘’,
value: 0,
}
}

Et d’autres fois, je vois cela:

data: () => ({
message: ‘’,
value: 0,
})

Quelle est la différence entre les 2 syntaxes? Y-a-t’il une raison particulière ou est-ce uniquement une manière de coder?

Merci.

Salutations.

Pour moi, c’est la même chose, dans les 2 cas, data est une fonction qui retourne un objet.
La deuxième syntaxe est une arrow fonction.
Attends quand même d’avoir confirmation d’autres développeurs (je ne suis pas sûr de ce que j’avance).

Il existe je crois une autre façon de faire qui est

data: { message: '', value: 0 }

Mais elle n’est pas conseillée.

Dans les deux cas il s’agit d’une fonction retournant un object.

Les arrow functions () => ... sont un peut différentes car elles n’ont pas de this propre, elles “héritent” du this du block parent.
Documentation :


Elles ont aussi une syntaxe plus compacte qui permet (dans certains cas) de retourner un objet sans utiliser le mot return, c’est d’ailleurs la raison pour laquelle elle est utilisée dans ton exemple.
Documentation :

1 Like

Bonjour,

Merci pour vos réponses, c’est clair pour moi.

Salutations.

1 Like

@nicolas a tout dit

data: () => ({ ... }) est plus concis, c’est ce que j’utilise en premier.

Après si tu dois utiliser des props / methods (ou autres choses dépendant de l’instance du composant this), il faut utiliser la version fonction data () { ... }

1 Like

Même si ça fonctionne il ne faut pas faire ainsi.
Toujours utiliser une fonction qui retourne une structure de donnée.
Seuls les data dans l’instance de vue peuvent avoir un objet (parce normalement il n’y a pas plusieurs instances)

1 Like