Propiedades computadas

Entonces… 😮

Methods == Logica de eventos

Computed == Logica de data en general

Una diferencia entre una computada y un método es que la computada no necesita ser llamada para que escuche los cambios. El método como dice la profe, puede retornar el valor deseado, pero siempre hay que hacer un llamado al mismo cuando queramos tenerlos en la vista.

La principal diferencia entre methods y computed es entonces:
Cuando necesitamos cambiar la data debemos usar methods, pero cuando necesitamos cambiar la presentación de los datos existentes usamos computed

Osea una propiedad computada en vue seria algo como
_
Una funcion que se ejecuta al inicio del renderizado de la app y que almacena su valor “calculado” y este es el que se usa, pero ademas se calcula de nuevo cuando cambian las “variables” definadas en data a las que hace referencia.
_
jeje, creo que lo entiendo, pero se dificulta explicarlo en palabras simples
😅😅

Una propiedad computada es:

Basicamente son funciones que devuelven un valor del componente PERO antes hace algun calculo o transformacion.

Ejemplo:

<template>
  <div class="content">
    {{double}}
  </div>
</template>

<script>
  export default {
    data: () => ({
      value: 20
    }),
    computed: {
      double() {
        return this.value * 2;
      }
    }
  };
</script>

<style scoped></style>

Esto nos devuelve una multiplicacion de value a traves de nuestra propiedad computada.

NOTA: No puede existir una proiedad computada sin return

Les comparto un código de ejemplo que además muestra la fecha y hora actualizada en segundos (con setInterval) en pantalla, apoyándome no solo en propiedades computadas sino también en el método create:

    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    firstName: "Checo",
                    lastName: "Perez",
                    now: new Date()
                };
            },
            created() {
                var self = this;
                window.setInterval(() => self.updateDateTime(), 1000);
            },
            methods: {
                updateDateTime() {
                    this.now = new Date();
                }
            },
            computed: {
                fullName() {
                    return this.firstName + " " + this.lastName;
                },
                today() {
                    return this.now.toLocaleString();
                }
            },
            template:
                `
                <div> {{ fullName }} </div>
                <input v-model="firstName" />
                <input v-model="lastName" />
                <div>{{ today }}</div>
                `
        }).mount("#app");
        console.log(vm);
    </script>

Dudas sobre como trabajar con fechas ?

…

• Les dejo este recurso de como trabajar con fechas y todo sobre el objeto date

https://www.youtube.com/watch?v=aIHQsAjRLYU&list=PLvq-jIkSeTUZ6QgYYO3MwG9EMqC-KoLXA

Hola! Comparto con ustedes un recurso que encontré en Internet para entender mejor sobre este tema de propiedades computadas 😄

https://codingpotions.com/vue-computadas#:~:text=Las propiedades computadas o computed,de cálculo antes de devolverla.

Una de las grandes diferencias entre las propiedades computadas y los métodos, es que las primeras mantienen la última respuesta en cache, y ese valor lo retornan sin tener que volver a ejecutar el código que haya dentro de ellas, solo “recalcula” cuando alguna de sus dependencias cambia, lo cual ayuda al performance de nuestras aplicaciones.

<!-- EJERCICIO 3: PROPIEDADES COMPUTADAS -->
<template>
    <h1>Simulador de carrito de compras</h1>
    <h3>(Practicando propiedades computadas)</h3>
    <div>
        <table style="margin: auto">
            <thead>
                <tr>
                    <th>Nombre</th>
                    <th>Precio</th>
                    <th>Cantidad</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in carrito" :key="index">
                    <td>{{ item.nombre }}</td>
                    <td>{{ item.precio }}</td>
                    <td>{{ item.cantidad }}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <p><b>Total: S/. {{total}}</b></p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            carrito: [
                { nombre: 'Camiseta', precio: 20, cantidad: 2 },
                { nombre: 'Pantalón', precio: 40, cantidad: 1 },
                { nombre: 'Calcetines', precio: 5, cantidad: 3 },
            ],
        };
    },

    computed: {
        total() { //Propiedad computadas, Si fuera un metodo, el interprete haria los calculos en tiempo de ejecucion
            let total = this.carrito.map((item) => item.precio * item.cantidad)
                                    .reduce((next,prev) => next + prev, 0);
            return total;
        }, //Los calculos se almacenan en el cache y se actualizan cuando se detecten cambios en las dependencias(precio, cantidad)
    },
};
</script>

<style></style>

Siempre que se vaya a trabajar concatenando varias variables para mostrar en una vista conviene utilizar los template strings (``) por sobre el concatenado tradicional ya que permite trabajar ocn mayor comididad y resultando en un código más limpio.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://unpkg.com/vue@next"></script>
    <div id="app"></div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            //Nuestra variables de estado
            firstName: "Daniel",
            lastName: "Briceño",
            now: new Date(),
          };
          //methods llevan nuestra logica de eventos
          //computed (funciones computadas) va a llevar nuestra logica de data general y propieades virtuales
        },
        computed: {
          fullName() {
            return `${this.firstName} ${this.lastName}`;
          },
          formatToday() {
            return this.now.toLocaleDateString();
          },
        },
        template: `
        <div>{{ fullName }}</div>
        <div>{{ formatToday }}</div>
        `,
      }).mount("#app");
      console.log(vm);
    </script>
  </body>
</html>

La parte de computed me recordó demasiado a los Pipes en Angular

Una de las ventajas de las propiedades computadas son que se almacenan en cache en funcion de sus dependencias reactivas.
https://vuejs.org/guide/essentials/computed.html#computed-caching-vs-methods

Aquí la documentación explicando un la utilización de un método y una propeidad computada:
https://es.vuejs.org/v2/guide/computed.html#Caching-computado-vs-Metodos
.
La forma de entenderlo a la perfección es creando varios elementos div con el mismo llamado, en una utilizan la propiedad computada y en otra utilizan un método pero además le agregan un console.log para que puedan notar la diferencia en el inspector. Cuando llaman a una función o método el consol.log se ejecuta cada vez que este es llamado, en cambio la propeidad computada se ejecuta el console.log una sola vez a pesar de que haya muchos elementos div ya que la priemra vez es calculada y almacenada en caché y luego la reutiliza.

<script>
    const vm = Vue.createApp({
        data() {
            return {
                firstName: 'Carlos',
                lastName: 'Rodríguez',
                now: new Date(),
            };
        },
        computed: {
            fullName() {
                return `${this.firstName} ${this.lastName}`;
            },
            today: function() { // Otra forma de escribir la propiedad computada, también funciona con los métodos
                console.log('Se ejecutó la propiedad computada');
                return this.now.toLocaleDateString();
            },
        },
        methods: {
            fullName2() {
                console.log('Se ejecutó el método');
                return `${this.firstName} ${this.lastName}`;
            },
        },
        template: `
            <div>{{ firstName }} {{ lastName }}</div>
            <div>{{ now.toLocaleDateString() }}</div>
            <div>{{ fullName }}</div>
            <div>{{ fullName }}</div>
            <div>{{ fullName }}</div>
            <div>{{ today }}</div>
            <div>{{ fullName2() }}</div>
            <div>{{ fullName2() }}</div>
            <div>{{ fullName2() }}</div>
        `,
    }).mount('#app');
</script>

Esto es como SwiftUI 😍

Las expresiones en el template son muy convenientes, pero están diseñadas para operaciones simples. Poner demasiada lógica en sus templates puede hacerlos grandes, complejos y difíciles de mantener. Por ejemplo:

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

En este punto, el template ya no es simple y declarativo. Debe mirarlo por un segundo antes de darse cuenta de que muestra message al revés. El problema se agrava cuando desea incluir el mensaje invertido en su template más de una vez.

Es por eso que para cualquier lógica compleja, deberia usar una propiedad computada.

Doc Oficial Vuejs

now.toLocaleDateString()

```siempre aprendiendo algo nuevo, me gusta!

https://vuejs.org/guide/essentials/forms.html#basic-usage
de aquí sale la info

Creo que estaría bien saltar antes al sistema de componentes,
Hasta ahora se está haciendo todo a saco en el mount…

Un ejemplo parecido al anterior utilizando propiedades computadas.

const vm = Vue.createApp({
      data() {
        return {
          value: 1
        };
      },
      computed: {
        double() {
          return this.value * 2;
        }
      },
      template: `
        <p>{{ double }}</p>
        <input
          type="number"
          v-model="value"
        />
      `
    }).mount('#app');

Sigo impresionado jajajajaja es muy pero muy parecida la logica con FastApi, es mucho mas facil por que qprendi mucho en python.

return `${this.firsName} ${this.lastName}`

Pueden hacer el return así aprovechando ES6

Las propiedades computadas son completamente reactivas .

Esto me recuerda un poco al useEffect de React xD

Propiedades computadas

las propiedades computadas devuelven valores que se puede decir formateadas a partir de otras que ya existen

Mi aporte

<body>
    <script src="https://unpkg.com/vue@3"></script>
    <div id="app">
        <h1>{{count}}</h1>
        <button @click="incrementar">Incrementar</button>
        <button @click="disminuir">Disminuir</button>
        <div>
            <h2>{{text}}</h2>
            <input v-model="text">
        </div>
        <div>
            <h3>{{ fullName }}</h3>
            <p>{{now}}</p>
            <p>{{today}}</p>
        </div>
    </div>
    
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    count: 0,
                    text: 'Hola vue!!',
                    firstName: 'Andrey',
                    lastName: 'Gómez',
                    now: new Date()
                }
            },

            methods: {
                incrementar(){
                    this.count++;
                },

                disminuir(){
                    this.count--;
                },
                input(e){
                    this.text = e.target.value
                }
            },

            computed: {
                fullName(){
                    return this.firstName + " " + this.lastName
                },
                today(){
                    return this.now.toLocaleDateString()
                }
            }

            
        }).mount('#app')
        //console.log(vm);
    </script>
</body>