Propiedades computadas

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.

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
😅😅

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

Entonces… 😮

Methods == Logica de eventos

Computed == Logica de data en general

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>

Propiedades computadas

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

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>

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/[email protected]"></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>