Dopo aver visto come funzionano i metodi, vediamo cosa sono ed in che cosa si distinguono, in Vue.js, le computed properties e i watcher.
Le computed properties sono funzioni che vengono eseguite soltanto quando necessario, ovvero quando “cambia” qualcosa che le riguarda. I metodi invece vengono eseguiti ogni volta che si esegue un’azione con Vue. I watcher sono invece funzioni che vengono eseguite quando cambia uno specifico data. Watch nel senso proprio di “osservare” il cambiamento del valore di un dato. Nell’esempio seguente vediamo come funziona una computed property ed una funzione watch.
Nello specifico…
- Tramite le direttiva v-on:click (abbreviata in @click) andiamo ad aumentare o diminuire il valore del data chiamato “value”.
- La computed property chiamata result() di default restituisce la scritta “Not there yet”, quindi non fa nulla finchè, come descritto sopra, questo valore non cambia.
- Quando result() cambia (ovvero quando il valore che impostiamo è 16) allora si attiva il watch che, in questo caso, resetta value a 0. E così il circolo ricomincia.
See the Pen qxxLjM by Davide De Maestri (@gleenk) on CodePen.13441
