Centro de la Innovación la Agroindustria y la Aviación
Instructor: Alexander Patiño Londoño
Framework Progresivo de JavaScript
Vue.js es el framework JavaScript que cambió la forma de pensar en el desarrollo web frontend — reactivo, elegante y progresivamente adoptable.
Vue.js nació de la mente de Evan You, ex-ingeniero de Google que trabajó en AngularJS. Frustrado por la complejidad de los frameworks existentes, quería extraer las partes que realmente le gustaban de Angular y construir algo más liviano.
En 2013, mientras trabajaba en Google Creative Lab, comenzó a experimentar con un prototipo llamado "Seed.js". La primera versión pública, v0.6.0, se lanzó en diciembre de 2013 y el 8 de febrero de 2014 fue anunciado al mundo en Hacker News.
Lo que comenzó como un proyecto personal se convirtió en uno de los frameworks más queridos de la comunidad JavaScript — prueba de que la simplicidad y la elegancia siempre triunfan.
Vue fue diseñado desde el principio para ser adoptado de forma incremental, centrándose en la capa de vista e integrándose fácilmente con cualquier proyecto.
El sistema rastrea automáticamente las dependencias en tiempo de ejecución. Cuando el estado cambia, la vista se actualiza de forma eficiente y precisa.
Los Single File Components (.vue) encapsulan template, lógica y estilos en un único archivo reutilizable y auto-contenido.
Agrega Vue a una parte de una página existente sin reescribir todo. Escala desde un simple widget hasta una SPA compleja.
Organiza la lógica de componentes por funcionalidad con script setup. Facilita la reutilización con composables y mejora TypeScript.
Vue 3 optimiza agresivamente el Virtual DOM generando código altamente optimizado que reduce el overhead en tiempo de ejecución.
Escrito completamente en TypeScript. Autocompletado, verificación de tipos y refactoring seguro desde el primer día sin configuración.
v-if, v-for, v-model, v-bind, v-on — directivas integradas que cubren todos los patrones comunes de UI con sintaxis declarativa.
Sistema integrado de transiciones CSS/JS para elementos que entran y salen del DOM. Experiencias fluidas con mínimo esfuerzo.
La extensión Vue DevTools permite inspeccionar el árbol de componentes, el estado, los eventos y el historial de cambios en tiempo real.
Un componente Vue combina template HTML con lógica JavaScript de forma natural. La Composition API con <script setup> es la forma moderna recomendada en Vue 3.
El template usa sintaxis HTML familiar con extensiones especiales. La interpolación {{ }} y las directivas v-* hacen la lógica de vista explícita y legible.
La reactividad es automática: declara datos con ref() o reactive() y Vue rastreará los cambios actualizando solo lo necesario.
<template> <div class="contador"> <h2>{{ titulo }}</h2> <p>Clicks: <strong>{{ count }}</strong></p> <button @click="incrementar">➕ Incrementar</button> <button @click="resetear">🔄 Resetear</button> </div> </template> <script setup> import { ref, computed } from 'vue' // Props del componente const props = defineProps({ titulo: { type: String, default: 'Contador Vue' } }) // Estado reactivo const count = ref(0) // Propiedad computada const esPar = computed(() => count.value % 2 === 0) // Métodos const incrementar = () => count.value++ const resetear = () => count.value = 0 </script> <style scoped> .contador { padding: 2rem; border-radius: 8px; } </style>
Comparación honesta entre Vue.js, React y Angular para ayudarte a elegir la herramienta adecuada.
| Característica | Vue.js | React | Angular |
|---|---|---|---|
| Curva de aprendizaje | Muy baja | Moderada | Alta |
| Bundle (min+gzip) | ~22 KB | ~42 KB | ~130 KB+ |
| TypeScript | ✓ Nativo | ◐ Opcional | ✓ Requerido |
| Two-way binding | ✓ v-model | ✗ Manual | ✓ ngModel |
| Single File Components | ✓ .vue | ◐ JSX | ◐ 3 archivos |
| State management oficial | ✓ Pinia | ✗ Redux/Zustand | ✓ NgRx |
| Rendimiento general | Excelente | Muy bueno | Bueno |
| Soporte empresarial | Comunidad + sponsors | Meta |
Vue es ideal para SPAs complejas gracias a Vue Router, Pinia y el ecosistema Vite. Navegación fluida sin recargas de página.
Gracias a su naturaleza progresiva, puedes embeber Vue en páginas existentes para añadir interactividad sin migrar el proyecto completo.
Con Nuxt.js generas páginas en el servidor o de forma estática para máximo SEO, ideal para blogs, e-commerce y portales de contenido.
Con Capacitor, Ionic o Quasar, usa tu código Vue para generar apps nativas o híbridas para iOS, Android y escritorio con Electron.