Validar Props con Vuejs 2
Validar Props con Vuejs 2
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!


Las propiedades calculadas en Vue.js 2 nos permiten definir propiedades dinámicas a través de cálculos desde nuestros componentes de forma muy sencilla.

Gracias a las propiedades calculadas podemos definir datos complejos que estén basados por ejemplo en otras propiedades del componente de forma muy sencilla.

Propiedades calculadas en Vue.js 2

Imagina simplemente que tienes un nombre y un apellido como propiedades del componente, está claro que podrías hacer lo siguiente para obtener el nombre completo.

Aunque el código anterior es completamente funcional, también es cierto que nuestras templates se pueden volver bastante complejas si escribimos así nuestro código, para crear mejores aplicaciones entonces debemos utilizar Propiedades calculadas.

Nuestra aplicación ha mejorado bastante, ahora hemos generado una nueva propiedad calculada de forma dinámica que tenemos disponible en nuestra template.

Si conoces Vue.js 2, supongo que te estarás diciendo, vale, pero esto lo puedo hacer definiendo una función dentro de methods de la siguiente forma.

Y el resultado será exactamente el mismo que con propiedades calculadas, pero existe una diferencia importante, una propiedad calculada solo se volverá a evaluar cuando algunas de sus dependencias han cambiado, en este caso firstName y lastName, lo que quiere decir que trabajan en caché. En cambio, methods se volverá a evaluar en cada actualización del componente.

Seguimos teniendo un problema con las propiedades calculadas, ¿cómo podemos actualizar su valor cuando hayan cambiado los participantes?, existe un get y un set para cualquier propiedad calculada en Vue.js 2, y por defecto es get, para poder utilizar ambos podemos definir fullName de la siguiente forma.

Ahora ya tenemos un ejemplo 100% funcional trabajando con propiedades calculadas en Vue.js 2 utilizando getters y setters.