Computed properties en Vue.js: cómo crearlas

Aprende a crear propiedades computadas que generan valores dinámicos a partir de otras propiedades. Verás cómo definir funciones en el objeto computed, usarlas con v-model y mejorar la legibilidad con template strings de ES6. Además, identifica buenas prácticas con this y evita errores comunes de linteo.

¿Qué son las propiedades computadas y por qué importan?

Las propiedades computadas son funciones que devuelven un valor basado en otras propiedades. Se definen dentro de un objeto llamado computed y se actualizan de forma reactiva cuando cambian sus dependencias, por ejemplo, cuando cambian name o last name.

• Se declaran en el objeto computed del view model.
• Son funciones puras que retornan un valor derivado.
• Se recalculan ante cambios en sus dependencias.
• Se accede a propiedades y métodos con this dentro de computed, watchers y métodos.
• Útiles para casos como concatenar full name o calcular edad a partir de fecha de nacimiento.

¿Cómo implementarlas con v-model y this?

Para que una propiedad computada funcione, sus dependencias deben existir en el objeto data. Si creas un input con v-model="lastName", debes definir lastName en data. Luego, en computed, defines una función que retorne el valor calculado y lo muestras en una expresión del template.

¿Qué pasos seguir para crear full name con v-model?

• Agrega un input con v-model para lastName.
• Declara en data las propiedades name y lastName.
• Crea en computed la función fullName que concatene ambos valores.
• Muestra el resultado en el template con una expresión.

Ejemplo mínimo:

<input v-model="lastName" />
<p>{{ fullName }}</p>

export default {
  data () {
    return {
      name: '',
      lastName: ''
    }
  },
  computed: {
    // Nota: algunos linters piden espacio antes de paréntesis.
    fullName () {
      return this.name + ' ' + this.lastName
    }
  }
}

Punto clave: usa this para acceder a name y lastName dentro de computed.

¿Cómo optimizar concatenación con template strings?

Usa template strings de ES6 para escribir código más limpio. Emplea back ticks y la sintaxis ${} para interpolar variables sin concatenar manualmente espacios.

Antes:

fullName () {
  return this.name + ' ' + this.lastName
}

Con template strings:

fullName () {
  return `${this.name} ${this.lastName}`
}

Ventajas: mejor legibilidad, menos errores por espacios y concatenaciones.

¿Qué tener en cuenta sobre estilos y errores?

• Un aviso de linteo por espacio antes de paréntesis es de estilo, no de sintaxis.
• Al guardar, verás cómo fullName se regenera cada vez que cambian name o lastName.
• Mantén las dependencias declaradas en data para evitar errores.

¿Qué otros casos de uso puedes practicar?

Un uso frecuente es calcular la edad a partir de una fecha de nacimiento. Define en data la fecha y crea una propiedad computada que derive la edad. Así, cada modificación en la fecha actualizará la edad de forma automática.

Sigue estos pasos: - Declara una propiedad para la fecha de nacimiento en data. - Crea una función en computed que derive la edad desde la fecha. - Muestra la edad en el template y verifica que cambia al modificar la fecha.

Si te animas, pausa y construye el ejemplo. Comparte tu código en comentarios para que podamos revisarlo juntos.