Vue tiene fama de ser el framework fácil de empezar. La fama es merecida, pero detrás de esa «facilidad» hay algunas buenas ideas que vale la pena entender antes de salir copiando ejemplos de Internet.
Qué es Vue, sin rodeos
Vue es un framework JavaScript para construir interfaces. En lugar de manipular el DOM manualmente (document.querySelector por aquí, innerHTML por allá), describes cómo debe verse la pantalla para cada estado de los datos y dejas que Vue haga la conexión.
La idea central que sostiene todo es sencilla: la UI es una función del estado. Si cambia el estado, la pantalla lo refleja. Dejas de pensar en «ahora tengo que actualizar aquel <span>» y pasas a pensar en «cuando cambie este dato, ¿qué debe mostrar la pantalla?». Es menos paso a paso y más declarativo.
Reactividad: el corazón de Vue
La reactividad es el mecanismo que hace que la pantalla responda por sí sola cuando cambia un dato. Declaras un valor reactivo, lo usas en el template y, cuando cambia, Vue vuelve a renderizar solo lo que dependía de él.
js import { ref } from 'vue'
const contador = ref(0) function incrementar() { contador.value++ }
En el template, contador se convierte directamente en texto. En JavaScript, accedes a él y lo modificas mediante .value; ese .value es el detalle que todo principiante olvida. Para objetos existe reactive, que no necesita .value, pero solo funciona con objetos y arrays.
Regla práctica para no bloquearte: usa ref para valores individuales (números, cadenas y booleanos) y reactive cuando quieras un objeto de estado. Si tienes dudas, ref resuelve casi todo.
Template syntax: HTML con superpoderes
El template de Vue es HTML real con algunas adiciones. No necesitas JSX ni reaprender a escribir markup.
html <button @click="incrementar"> Hice clic {{ contador }} veces </button>
¡Ya hiciste clic!
Lo esencial cabe en cinco cosas: {{ }} interpola un valor, : (atajo de v-bind) vincula un atributo a un dato, @ (atajo de v-on) escucha un evento, v-if muestra u oculta y v-for repite. Con esto ya puedes construir el 90 % de una pantalla. El resto son detalles que aprenderás cuando los necesites.
Composition API vs. Options API
Son dos formas de escribir el mismo componente. La Options API organiza todo por categorías: un bloque data, uno de methods y otro de computed. Es didáctica y excelente para componentes pequeños.
js export default { data() { return { contador: 0 } }, methods: { incrementar() { this.contador++ } } }
La Composition API (el <script setup> que ves en los ejemplos modernos) organiza el código por lógica, no por tipo. El estado, la función y los valores computed relacionados quedan juntos, y puedes extraer partes en composables reutilizables.
js
<script setup> import { ref } from 'vue' const contador = ref(0) function incrementar() { contador.value++ } </script>Ninguna de las dos está mal. La Options API ofrece un comienzo más sencillo; la Composition API escala mejor cuando el componente crece y quieres reutilizar lógica. La documentación nueva y la comunidad se inclinan por Composition API. Si estás empezando hoy, apréndela primero, pero no te preocupes si encuentras Options API en código antiguo.
Single-File Components: todo en un solo archivo
El formato característico de Vue es el archivo .vue, el Single-File Component. El template, la lógica y los estilos del mismo componente viven en el mismo lugar:
html <template> <button @click="incrementar">{{ contador }}</button> </template>
<script setup> import { ref } from 'vue' const contador = ref(0) function incrementar() { contador.value++ } </script> <style scoped> button { padding: 8px 16px; } </style>El detalle que te salva es scoped en <style>: el CSS queda limitado a ese componente y no se filtra al resto de la aplicación. Se acabó el miedo a renombrar una clase y romper una pantalla en otra parte del proyecto.
Cuándo Vue es una excelente opción
Vue brilla en tres situaciones. La primera: estás empezando y quieres un framework que no te abrume el primer día; la curva de aprendizaje es realmente suave. La segunda: adopción incremental: puedes incorporar Vue en una parte pequeña de una página heredada sin reescribirlo todo, algo que no todos los frameworks permiten con tanta naturalidad. La tercera: quieres un ecosistema oficial y cohesionado: el router (Vue Router) y la gestión de estado (Pinia) son mantenidos por el mismo equipo, así que no terminas armando un rompecabezas entre diez bibliotecas competidoras.
No es una solución mágica. Un equipo grande que ya trabaja con otro stack, o una necesidad muy específica de un ecosistema que solo existe en otro framework, son motivos legítimos para mirar hacia otro lado. Pero para empezar, aprender conceptos de UI reactiva y entregar algo real rápidamente, es difícil equivocarse con Vue.
Si entendiste que la UI es una función del estado, que la reactividad es Vue observando tus datos y que un .vue reúne todo en un archivo, ya tienes el modelo mental. El resto consiste en escribir componentes hasta que se vuelva automático. Abre un .vue y haz clic en el botón.