Seguimos aprendiendo Vue, y más cositas de las plantillas. En esta ocasión toca hablar de las propiedades computadas de VueJS. Se trata de una de las características más simples de todo lo que te ofrece Vue, y que no es sino la opción de evitar lógica compleja en la vista, y hacerlo más aseguible dentro del objeto Vue.
Propiedades computadas
El mejor ejemplo de cómo utilizar, o el por qué utilizar las propiedades computadas es el que viene recogido en la documentación oficial: https://vuejs.org/v2/guide/computed.html. Se trata de poner una cadena del reverso, y en lugar de escribir el código en la propia plantilla, lo haces en una propiedad computada, computed.
El hecho de disponer de propiedades computadas permite hacer llamadas a éstas de igual forma que al modelo de datos (data), ya que el objetivo es aliviar la plantilla para concentrar la lógica en la instancia Vue.
Porque no hay que olvidar que dentro de la plantilla puede incluirse lógica e incluso compleja, pero es desaconsejable porque enlentece el renderizado, y si necesitamos rapidez, mejor que se encargue el objeto Vue que al renderizar. Para pequeñas cosas, no hay problema, pero es lo más deseable.
El objetivo de las propiedades computadas es manipular el modelo creando nuevas propiedades ANTES de renderizar.
Un buen uso de propiedad computada es, por ejemplo, si deseas aplicar un filtro a una colección (array) de elementos o de objetos, o necesitas ordenar, …
No es lo mismo que los métodos
Aunque pueda resultar similar a los métodos methods, tienen sus diferencias.
Si en lugar de propiedad computada lo incorporas en los métodos, el resultado obtenido es exáctamente el mismo.
Entonces, ¿dónde está la diferencia? En el rendimiento.
Las propiedades computadas, en la plantilla, se llaman igual que si formaran parte del modelo: {{ propiedadComputada }}, mientras que las funciones se llaman así {{ funciones() }}.
Un método se evalúa constantemente, mientras que una propiedad computada sólo se evalúa cuando cambian las dependencias, o sea, hay un cambio en el contenido del modelo de datos.
Hoy no hay código, aunque te aseguro que acabarás poniendo en buena práctica esta entrada teórica!
Happy coding!