01. Introducción a Vue 3
¿Qué es Vue?
Section titled “¿Qué es Vue?”Vue.js es un framework progresivo de JavaScript para construir interfaces de usuario. A diferencia de otros frameworks monolíticos, Vue está diseñado desde cero para ser adoptado incrementalmente. La biblioteca central se enfoca solo en la capa de vista, y es fácil de integrar con otras bibliotecas o proyectos existentes.
Características principales de Vue:
- Reactivo y componible: Sistema de componentes que permite construir interfaces modulares y reutilizables
- Rendimiento optimizado: Virtual DOM eficiente y compilación inteligente
- Pequeño tamaño: Núcleo liviano (aprox. 20KB min+gzip) con rendimiento excepcional
- Ecosistema completo: Herramientas oficiales para routing, gestión de estado y construcción de proyectos
- Curva de aprendizaje suave: Sintaxis familiar para desarrolladores de HTML, CSS y JavaScript
Diferencias con Vue 2
Section titled “Diferencias con Vue 2”Vue 3 introduce cambios significativos respecto a Vue 2:
- Reescritura completa en TypeScript: Mejor soporte para tipado y autocompletado
- Nuevo sistema de reactividad: Basado en Proxy de ES6 en lugar de Object.defineProperty
- Renderizador modular: Mejor separación de responsabilidades y tree-shaking
- Mejor rendimiento: Más rápido en todos los escenarios (hasta 2x más rápido)
- Menor tamaño: Mejor tree-shaking para reducir el tamaño del bundle
- Multiple root nodes: Los componentes pueden tener múltiples nodos raíz (fragments)
- Composition API: Nueva forma de organizar la lógica (alternativa a Options API)
- Teleport: Componente para renderizar contenido en otro lugar del DOM
- Suspense: Manejo mejorado de componentes asíncronos
- createApp: Nueva API para crear instancias de aplicación
- Emits component option: Declaración explícita de eventos emitidos
// Vue 2 - Creación de instanciaconst app = new Vue({el: '#app',data: { count: 0 }})
// Vue 3 - Creación de aplicaciónconst app = createApp({data() { return { count: 0 }}})app.mount('#app')Ventajas de la Composition API
Section titled “Ventajas de la Composition API”La Composition API es una de las características más importantes de Vue 3, que ofrece una forma alternativa de organizar la lógica de los componentes:
1. Mejor organización del código
Section titled “1. Mejor organización del código”Permite agrupar el código por funcionalidad lógica en lugar de por opciones, lo que facilita entender y mantener componentes complejos.
// Options API (Vue 2)export default {data() { return { count: 0, name: 'Vue' }},methods: { increment() { this.count++ }},computed: { doubleCount() { return this.count * 2 }},mounted() { console.log('Component mounted')}}
// Composition API (Vue 3)import { ref, computed, onMounted } from 'vue'
export default {setup() { // Estado const count = ref(0) const name = ref('Vue')
// Computadas const doubleCount = computed(() => count.value * 2)
// Métodos function increment() { count.value++ }
// Ciclo de vida onMounted(() => { console.log('Component mounted') })
// Exponer al template return { count, name, doubleCount, increment }}}2. Reutilización de lógica
Section titled “2. Reutilización de lógica”Facilita extraer y reutilizar lógica entre componentes mediante funciones composables (composables), eliminando las limitaciones de mixins.
// useCounter.js - Composable reutilizableimport { ref, computed } from 'vue'
export function useCounter(initialValue = 0) {const count = ref(initialValue)const doubleCount = computed(() => count.value * 2)
function increment() { count.value++}
return { count, doubleCount, increment}}
// Uso en un componenteimport { useCounter } from './composables/useCounter'
export default {setup() { const { count, doubleCount, increment } = useCounter(10)
return { count, doubleCount, increment }}}3. Mejor soporte para TypeScript
Section titled “3. Mejor soporte para TypeScript”Ofrece inferencia de tipos más precisa y mejor experiencia de desarrollo con TypeScript.
4. Menor tamaño de bundle
Section titled “4. Menor tamaño de bundle”Permite un mejor tree-shaking, ya que solo se incluyen las funciones que realmente se utilizan.