Diferencia entre data y ref en Vue

Comprende con claridad cómo pasar de Options API a Composition API en Vue y domina la reactividad con data, ref y la función setup. Aquí verás, paso a paso, cómo se define la información reactiva, por qué aparece .value y cómo Vue desempaqueta referencias en el template para mantener todo sencillo.

¿Qué cambia entre options api y composition api?

Trabajar con Composition API significa mover la lógica a la función setup. Allí accedes a los módulos reactivos internos de Vue y, en particular, a ref, que crea referencias reactivas simples para números, strings, booleanos, arreglos u objetos. Ya no defines un objeto data: centralizas la reactividad y funciones dentro de setup y retornas lo necesario al template.

¿Cómo se ve el paso de data a ref en código?

// Options API (esquema)
export default {
  data() {
    return {
      product: { /* info del producto */ },
      activeImage: 0,
      cartOpen: false,
      carrito: []
    }
  }
}

// Composition API (equivalente funcional)
export default {
  setup() {
    const product = ref({ /* igual que en Options API */ })
    const activeImage = ref(0)
    const cartOpen = ref(false)
    const carrito = ref([])

    // Ejemplo de cambio reactivo diferido
    setTimeout(() => {
      activeImage.value = 1
    }, 2000)

    // Exponer al template
    return { product, activeImage, cartOpen, carrito }
  }
}

• En Options API, data es un proxy observado por Vue.
• En Composition API, ref crea referencias reactivas simples.
• En setup, siempre se retorna un objeto con lo que el template necesita.

¿Cómo exponer datos al template desde setup?

Debes retornar un objeto con las referencias y funciones que quieras usar en el template. Esas claves estarán disponibles como si fueran propiedades del componente.

• Retorna: product, activeImage, cartOpen, carrito.
• Quedarán accesibles sin .value en el template.
• Mantienes la organización y escalas la lógica de forma clara.

¿Cómo funcionan los ref y por qué usan .value?

Un ref es una instancia interna de Vue basada en una clase llamada ref implementation. Internamente guarda el dato en la propiedad value. Vue observa ese value para disparar efectos cuando cambia, igual que observa las propiedades del proxy de data en Options API.

¿Cuándo usar .value y cuándo no?

• En JavaScript dentro de setup: usa miRef.value para leer o escribir.
• En el template: Vue desempaqueta la referencia y no necesitas .value.

// Dentro de setup
activeImage.value = 1 // cambia el valor observado

// En el template (no necesitas .value)
// {{ activeImage }}

• ref admite: números, strings, booleanos, arreglos y objetos.
• Vue observa value y recalcula los efectos del template al cambiar.
• No cambias el HTML existente: el desempaquetado automático mantiene todo limpio.

¿Cómo organizar el proyecto para comparar ambos enfoques?

Para contrastar comportamiento sin romper nada, crea dos carpetas paralelas y replica los archivos.

¿Qué pasos seguir para una prueba lado a lado?

• Crea la carpeta de Options API y la de Composition API.
• Copia y pega los archivos base en ambas carpetas.
• En la versión Composition, mueve la lógica a setup y usa ref.
• Retorna product, activeImage, cartOpen, carrito desde setup.
• Abre la carpeta de Composition en el navegador: el resultado debe ser equivalente.

Habilidades y conceptos trabajados: reactividad con proxies en data, referencias reactivas con ref, estructura de setup y retorno de contexto, observación de value, efectos en el template, uso de setTimeout para demostrar cambios reactivity-driven, y organización del código en módulos internos de Vue.

¿Quieres profundizar en otro patrón de reactividad o tienes una duda puntual sobre setup y ref? Cuéntalo en comentarios y seguimos la conversación.