Skip to content

01. Introducción a Vue 3

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

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
Comparación de sintaxis básica
// Vue 2 - Creación de instancia
const app = new Vue({
el: '#app',
data: { count: 0 }
})
// Vue 3 - Creación de aplicación
const app = createApp({
data() {
return { count: 0 }
}
})
app.mount('#app')

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:

Permite agrupar el código por funcionalidad lógica en lugar de por opciones, lo que facilita entender y mantener componentes complejos.

Options API vs Composition API
// 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
}
}
}

Facilita extraer y reutilizar lógica entre componentes mediante funciones composables (composables), eliminando las limitaciones de mixins.

Composable reutilizable
// useCounter.js - Composable reutilizable
import { 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 componente
import { useCounter } from './composables/useCounter'
export default {
setup() {
const { count, doubleCount, increment } = useCounter(10)
return {
count,
doubleCount,
increment
}
}
}

Ofrece inferencia de tipos más precisa y mejor experiencia de desarrollo con TypeScript.

Permite un mejor tree-shaking, ya que solo se incluyen las funciones que realmente se utilizan.

🐝