Computed properties en Vue.js: cómo crearlas

Contenido del curso

Introducción

CLI y Dev Tools

Manipulación del DOM

REST y HTTP

Sistema de Componentes

Vue Router

Extendiendo VueJS

Clases, Animaciones y Transiciones36

38
Animaciones CSS3 con transiciones en Vue
06:54 min

Vuex

Nuxt.js

Deploy a Producción con Now

Conclusiones

50
Cómo hacer deploy de tu app Vue.js
00:49 min

Bonus

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:004:13

Computed properties en Vue.js: cómo crearlas

Curso Profesional de Vue.js 2

Clase 15 de 53

Clase 15 / 53

Recursos

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: