data() y ref()

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);