Propiedades Computadas en Vue

Se pueden definir propiedades que se calcularán reactivamente en base a otras propiedades. Estas propiedades se denominan computadas. Se ubican en la configuración computed.

Veamos un ejemplo. Supongamos que en las propiedades se almacena el nombre y apellido del usuario:

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

Creemos una propiedad full que contendrá el nombre completo con el apellido:

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

Mostremos en la vista el contenido de nuestras propiedades:

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

Las propiedades computadas cambian reactivamente. Esto significa que si cambiamos el nombre o el apellido, entonces nuestra propiedad full cambiará automáticamente de forma reactiva e inmediatamente veremos los cambios en la pantalla.