A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Propiedades computadas

10/23
Recursos

Aportes 10

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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 鈥渃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
馃槄馃槄

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>