Υπολογιζόμενες Ιδιότητες στο Vue

Μπορείτε να ορίσετε ιδιότητες που θα υπολογίζονται αντιδραστικά βασισμένες σε άλλες ιδιότητες. Αυτές οι ιδιότητες ονομάζονται υπολογιζόμενες. Βρίσκονται στη ρύθμιση computed.

Ας δούμε ένα παράδειγμα. Ας υποθέσουμε ότι στις ιδιότητες αποθηκεύεται το όνομα και το επώνυμό του χρήστη:

javascriptdata() {
  return {
    name: 'john',
    surn: 'smit',
  }
}

Ας φτιάξουμε μια ιδιότητα full, που θα περιέχει το πλήρες όνομα με το επώνυμο:

javascriptcomputed: {
  full: function() {
    return this.name + ' ' + this.surn;
  }
}

Ας εμφανίσουμε στο template το περιεχόμενο των ιδιοτήτων μας:

App.vue<template>
  <p>{{ name }}</p>
  <p>{{ surn }}</p>
  <p>{{ full }}</p>
</template>

Οι υπολογιζόμενες ιδιότητες αλλάζουν αντιδραστικά. Αυτό σημαίνει ότι αν αλλάξουμε το όνομα ή το επώνυμο, τότε και η ιδιότητα full θα αλλάξει αυτόματα και αντιδραστικά και θα δούμε αμέσως τις αλλαγές στην οθόνη.