Si buscas un framework que combine buenas prácticas arquitectónicas con la libertad suficiente para adaptarse a cualquier proyecto, Vue.js ocupa ese lugar privilegiado entre React y Angular. Nacido de la mente de un miembro temprano del equipo de Angular, Vue trae consigo lo mejor de ambos mundos: estructura sólida y adopción incremental.
¿Por qué Vue.js se considera un framework de punto medio?
Vue.js se posiciona estratégicamente entre dos extremos [0:10]. React ofrece tanta flexibilidad que, dependiendo del seniority del desarrollador, se pueden cometer malas prácticas con facilidad. Angular, por su parte, impone buenas prácticas desde el inicio, pero su curva de aprendizaje resulta considerable para quienes comienzan. Vue entrega arquitecturas robustas sin sacrificar la capacidad de ir incorporándolo de forma progresiva a proyectos existentes.
Un dato relevante es que el equipo creador de Vue.js es también el responsable de Vite, el empaquetador más utilizado actualmente [0:45]. Angular y otros ecosistemas ya lo han adoptado por defecto, lo que refuerza la influencia de la comunidad Vue en el desarrollo web moderno.
¿Qué hace diferente a los archivos .vue?
A diferencia de React con sus archivos TSX o Angular con TypeScript puro, Vue utiliza su propia extensión de archivo: .vue [1:07]. Cada archivo combina tres bloques fundamentales: el <script setup>, donde reside la lógica; el <template>, que contiene el HTML con directivas reactivas; y opcionalmente estilos. Esta separación clara facilita la lectura y el mantenimiento del código.
¿Cómo funciona la reactividad con ref en Vue.js?
El concepto de ref es el mecanismo central de enlace de datos en Vue [1:24]. Al importar ref desde Vue, se crean variables reactivas que el framework observa para actualizar la vista de forma óptima.
javascript
import { ref } from 'vue'
const tasks = ref([])
const newTask = ref('')
tasks almacena el array de tareas con un estado inicial vacío.newTask guarda el texto de la nueva tarea como string vacío.
Cualquier variable instanciada con ref requiere acceder a su contenido mediante .value [2:15]. Este patrón garantiza que Vue detecte los cambios y re-renderice solo lo necesario, lo que se conoce como reactividad granular, similar a los signals de Angular pero sin la complejidad estructural que este exige.
¿Cómo se construye la lógica de agregar tareas?
La función para agregar tareas sigue patrones de inmutabilidad sobre los arrays [2:38]:
javascript
const addTask = () => {
const value = newTask.value
if (value) {
tasks.value = [...tasks.value, value]
newTask.value = ''
}
}
- Se obtiene el valor actual con
newTask.value.
- Se valida que no esté vacío.
- Se crea un nuevo array copiando los elementos existentes y agregando el nuevo al final con el spread operator.
- Se limpia el campo de entrada.
Toda la lógica permanece dentro del bloque <script setup>, sin necesidad de programación orientada a objetos. Son constantes de JavaScript convencionales.
¿Cómo se conecta la vista con los datos reactivos?
En el <template>, Vue ofrece directivas propias que enlazan el HTML con la lógica [3:22]:
html
<template>
<h1>Vue App</h1>
<input type="text" placeholder="Add new task" v-model="newTask" @keydown.enter="addTask" />
<p v-for="item in tasks">{{ item }}</p>
</template>
- v-model realiza el enlace de datos bidireccional entre el input y la variable
newTask.
- @keydown.enter dispara la función
addTask al presionar Enter; el símbolo @ es el atajo para escuchar eventos.
- v-for itera sobre el array
tasks y renderiza cada elemento con string interpolation usando doble llave {{ }}.
¿Qué ventajas ofrece Vue en proyectos reales?
Vue permite adopción incremental [5:22]: puedes tomarlo e implementarlo página por página en un proyecto que no tenga ningún framework. Empresas como GitLab lo utilizan en producción. Además, al no incluir routing ni manejador de estado por defecto, eliges las librerías que mejor se adapten a tus necesidades, similar al enfoque de React pero con una base más estructurada.
Su comunidad activa y el respaldo del equipo detrás de Vite garantizan un ecosistema en constante evolución. Si quieres un punto de partida con buena arquitectura y sin la rigidez inicial de Angular, Vue.js merece un lugar en tu lista de opciones. ¿Ya lo has probado en algún proyecto? Comparte tu experiencia.
