Computed/watch - vueJS

Par Scats, il y a 9 ans


Bonjour à tous,

je suis en train de suivre la formation sur VueJS, et j'ai un peu de mal à comprendre computed et le watchers.
Si quelqu'un pourait m'éclairer un peu sur ça.

Merci d'avance

5 réponses

betaWeb, il y a 9 ans

@Pandazaur l'exemple de la date n'est pas forcément le meilleur. Dans l'absolue, pour formatter une date, on utilisera plutôt un filtre :)

betaWeb, il y a 9 ans

Les computed properties sont des propriété permettant de réaliser une opération sur une data sans pour autant modifier celle-ci de façon irréversible. Tu la fait muter en quelques sorte. L'exemple donné dans la documentation est très parlant : http://rc.vuejs.org/guide/computed.html
Pour ce qui est des watchersn ceux-ci permettent, si j'ai bien pigé le truc, de watcher une variable afin d'y greffer une action plus ou moins complexe lorsque celle-ci change. Dans le premier exemple de la doc (http://rc.vuejs.org/guide/computed.html#Watchers), dès que la variable 'question' change, une série d'actions sont appliquées.

J'espère que c'est plus clair ?

Pandazaur, il y a 9 ans

Salut, une propriété "computed" est simplement un genre de "getter/modifier". Dans l'exemple ci-dessous, plutot que de créer une variable, je crée un getter (computed), comme ça si un de mes deux nombres change, la computed "somme" sera toujours à jour. Vois les computed comme des variables que tu peux créer à partir des variables que tu as dans "data", ca peut être une date formatée: tu aurais la date au format brut dans "data" et tu la formatterais dans une variable "computed".

Les watchers te permettent de faire une action lorsqu'une variable de data a changé.

new Vue({ data: { nombreUn: 5, nombreDeux: 10 }, watch: { nombreUn: function() { // nombreUn a changé, je fais une action ... } }, computed: { somme : function() { return this.nombreUn + this.nombreDeux; } } })

Cordialement

Pandazaur, il y a 9 ans

@betaWeb Effectivement tu as raison, l'exemple de la "somme" est meilleur

Scats, il y a 9 ans

Merci à vous deux, je mieux assimiler la chose.
j'avais une petite idée, mais j'étais pas sur d'avoir compris, du coup vous me le confirmer.