No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

data() y ref()

21/37
Recursos

Aportes 8

Preguntas 1

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Elementos √ļnicos reactivos
¬ŅCu√°ntas veces no hemos necesitado convertir un valor, no perteneciente al componente, como reactivo?
Para este caso, utilizamos ref porque nos permite enlazar una estructura para ejecutarla como un Plus del componente.

import { ref } from 'vue'

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

Cabe mencionar que no es tan necesario ref dentro de un setup a menos que queramos representar un template refs. Pero sobre todo, ambos conceptos, reactividad √ļnica o template, estamos acu√Īando al composition API.

Viniendo de Vue2 la verdad no me gusta tanto esta nueva manera de hacer las cosas, siento que se siente mucho como React, alguien podría compartirme más ventajas del ref()?

ref corresponden a un tipo de paquete este estar√° observando el value de alguna referencia

Esta es una nueva funcionalidad no? Esto no estaba en Vue 2 y me encanta!! aunque data como objeto es simple la verdad me parece muy interesante usar setup así.

Una de las ventajas del Composition API es que pr√°cticamente permite mejorar la lectura del c√≥digo, y para eso tenemos ciertas funciones, lo que en el Options API defin√≠amos con data() ac√° se define con ```ref(). . Sin embargo, para acceder aref()se necesita hacerlo mediante.value``, ya que Vue se mantiene observando los cambios de las propiedades para poder reaccionar a ellos ūüėĄ
.
Dejo el código de esta clase:
.
https://github.com/RetaxMaster/vue3-platzi-commerce/tree/35531ad1f9556d23f12b0e762af1ddd574e27b8b

Para que cambie cada 3 segundos constantemente la imagen:

setInterval(() => {
            if (activeImage.value) 
              activeImage.value = 0
            else 
              activeImage.value = 1
          }, 3000);

Es que usar ref para objeccto no es óptimo ya que se pierde la reactividad en las propiedades inetrnas de este, lo mejor es usar reactive

As√≠ pude hacer intermitentes las im√°genes de los Thumbs ūüėĀ

setInterval(() =>{
                    activeImage.value = Math.abs(activeImage.value - 1);
                }, 2000);