No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Propiedades computadas

10/23
Recursos

Aportes 28

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥渃alculado鈥 y este es el que se usa, pero ademas se calcula de nuevo cuando cambian las 鈥渧ariables鈥 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 鈥渞ecalcula鈥 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

Diferencia entre computed y methods <https://chat.openai.com/share/c4402dd9-1185-48a0-8757-b4b72cc53b6d>

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!

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>