Introducción a Vue3
Vue3 es un framework progresivo para construir interfaces de usuario.
ProgresivoSignifica que puedes incorporar solo una parte de las capacidades de Vue según las necesidades del proyecto: desde una simple mejora de interacción en una página hasta construir aplicaciones completas de una sola página (SPA), e incluso aplicaciones con renderizado del lado del servidor (SSR), Vue3 puede con todo.
Vue3 es un framework frontend progresivo de JavaScript liderado por Evan You (You Yuxi). Fue lanzado oficialmente el 18 de septiembre de 2020, con el nombre claveOne Piece (Rey de los Piratas)。
En comparación con Vue2, Vue3 reescribió por completo la arquitectura central: el sistema reactivo se actualizó deObject.definePropertyaProxy, e introduce la Composition API y mejora de forma integral el rendimiento, el soporte de TypeScript, el tamaño del paquete, etc.
El posicionamiento oficial de Vue3 es:un framework fácil de aprender y, a la vez, con la capacidad suficiente para soportar proyectos complejos.No exige una arquitectura específica como Angular, ni requiere una gran cantidad de optimización manual como React, sino que encuentra un equilibrio entre facilidad de uso y capacidad.
Diferencias fundamentales entre Vue3 y Vue2
Vue3 no es una actualización con parches de Vue2, sino una reescritura completa.
| Elemento de comparación | Vue2 | Vue3 |
|---|---|---|
| Principio de reactividad | Object.definePropertyno puede detectar la adición de propiedades ni los cambios por índice en los arrays | Proxyproxy completo de todas las operaciones del objeto, sin las limitaciones anteriores |
| Organización del código | Options API: data, methods, computed separados | Composition API: agrupa el código según los puntos de interés lógicos |
| Soporte de TypeScript | Adaptación tardía, inferencia de tipos limitada | El código central está reescrito en TypeScript; TS es un ciudadano de primera clase |
| Tamaño del paquete | Aproximadamente 20KB (gzip) en tiempo de ejecución | Compatible con Tree-shaking, empaquetado bajo demanda, mínimo solo 13.5KB |
| Rendimiento | Línea base | Renderizado inicial aproximadamente 55% más rápido, renderizado de actualizaciones aproximadamente 133% más rápido, uso de memoria reducido aproximadamente 54% |
| Nodo raíz de la plantilla del componente | Debe tener uno y solo un elemento raíz | Admite múltiples nodos raíz (Fragment) |
| API global | Montada en el constructor de Vue, el estado se comparte entre múltiples instancias | MediantecreateAppse crean instancias independientes, con un aislamiento más completo. |
Características principales
Las mejoras de Vue3 abarcan cuatro dimensiones: sistema reactivo, diseño de API, compilador y nuevos componentes integrados.
Composition API (API de composición)
La API de composición es el cambio de diseño más importante de Vue3; resuelve el problema fundamental de la Options API en Vue2:La lógica relacionada está dispersa en diferentes opciones, lo que dificulta su reutilización.。
En la Options API, los datos de una función de "búsqueda de usuario" pueden estar dispersos endata、methods、computed、watchcuatro opciones; mientras que la Composition API te permite escribir toda la lógica de una misma función junta y luego extraerla como una función reutilizable (Composable).
Ejemplo: Options API vs Composition API
<script>
export default {
data() {
return {
count: 0, // datos del contador
username: 'ejemplo' // datos del nombre de usuario
}
},
computed: {
doubled() { // el doble de count
return this.count * 2
}
},
methods: {
increment() { // incrementar el contador
this.count++
}
}
}
</script>
Ejemplo: escritura recomendada (azúcar sintáctico de script setup)
<script setup>
import { ref, computed } from 'vue'
// Los datos reactivos se declaran directamente, sin necesidad de return
const count = ref(0) // ref envuelve tipos primitivos
const username = ref('ejemplo')
// Propiedad computada
const doubled = computed(() => count.value * 2)
// Los métodos se definen directamente como funciones
function increment() {
count.value++ // Nota: el valor envuelto por ref debe accederse mediante .value
}
</script>
<template>
<!-- En la plantilla, ref se desenvuelve automáticamente, sin necesidad de .value -->
<p>Usuario: {{ username }}</p>
<p>Contador: {{ count }}, doble: {{ doubled }}</p>
<button @click="increment">+1</button>
</template>
<script setup>es el azúcar sintáctico de la Composition API: te permite, en el<script>nivel superior, escribir directamente código de la Composition API, sin necesidad de hacerlo manualmentereturn; todas las variables y funciones del nivel superior se exponen automáticamente a la plantilla. Esta es actualmente la forma más recomendada de escribir componentes de un solo archivo en Vue3.
Sistema reactivo: Proxy en lugar de defineProperty
La reactividad de Vue2 se basa enObject.defineProperty, este enfoque tiene dos problemas que no se pueden resolver de raíz: no puede detectar la adición de propiedades en objetos ni la asignación directa mediante índices en arrays. Vue3 usaProxypara resolver estos dos problemas de raíz.
Ejemplo: ref y reactive
// ref: adecuado para tipos primitivos (number, string, boolean)
// Para acceder y modificar el valor se necesita .value
const count = ref(0)
count.value = 10
// reactive: adecuado para objetos y arrays
// Se accede directamente a las propiedades, sin .value
const user = reactive({
name: 'EJEMPLO',
age: 18,
skills: ['vue', 'typescript']
})
// En Vue3 se pueden añadir nuevas propiedades a un objeto y la reactividad funciona con normalidad
user.email = '[email protected]' // En Vue2 esta operación no dispara la actualización de la vista
// También se pueden modificar directamente los elementos de un array
user.skills[0] = 'vue3' // En Vue2 esta operación no dispara la actualización de la vista
// Observar los cambios de los datos reactivos
watch(count, (newVal, oldVal) => {
console.log(`count pasó de ${oldVal}a ${newVal}`)
})
Composables (funciones componibles)
Los Composables son la forma estándar de reutilizar lógica con estado en Vue3, similar a los custom hooks de React.
Por convención, los nombres comienzan conuseuse, extrayendo un bloque completo de lógica reactiva como función independiente para reutilizarlo en múltiples componentes.
Ejemplo: Composable personalizado
// Encapsula la lógica del contador; cualquier componente puede reutilizarla.
import { ref, computed } from 'vue'
export function useCounter(initialValue = 0) {
const count = ref(initialValue) // Estado interno reactivo
const doubled = computed(() => count.value * 2) // Estado derivado
function increment() { count.value++ }
function decrement() { count.value-- }
function reset() { count.value = initialValue }
// Devuelve el estado y los métodos que se exponen al exterior
return { count, doubled, increment, decrement, reset }
}
Ejemplo: usar un Composable en un componente
import { useCounter } from './composables/useCounter'
// Se puede desestructurar directamente, la reactividad se mantiene
const { count, doubled, increment, decrement, reset } = useCounter(10)
</script>
<template>
<p>Valor actual: {{ count }}, doble: {{ doubled }}</p>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
<button @click="reset">Restablecer</button>
</template>
Nuevos componentes integrados
Vue3 añade tres componentes integrados que resuelven tres escenarios de alta frecuencia en el desarrollo frontend.
| Componente | Problema que resuelve | Escenario de uso típico |
|---|---|---|
| Fragment | Vue2 exige que la plantilla del componente tenga un único nodo raíz; Fragment permite múltiples nodos raíz sin necesidad de envolver en un div adicional. | Componentes de elementos de lista, reducir niveles innecesarios de DOM |
| Teleport | Renderiza el HTML del componente en cualquier posición especificada del DOM, superando las restricciones de contexto de apilamiento CSS del componente padre. | Modales globales, notificaciones Toast, barras de herramientas flotantes |
| Suspense | Antes de que se cargue un componente asíncrono, muestra de forma elegante el contenido de respaldo (fallback) y gestiona de manera uniforme el estado de espera asíncrona. | Pantalla esqueleto para componentes con carga diferida, Loading durante el cambio de ruta |
Ejemplo: Teleport para implementar un modal global
import { ref } from 'vue'
const showModal = ref(false)
</script>
<template>
<button @click="showModal = true">Abrir modal</button>
<!--
Teleport monta el contenido del modal bajo el body,
en lugar de dentro del elemento padre del componente actual, evitando problemas de z-index y overflow.
-->
<Teleport to="body">
<div v-if="showModal" class="modal-mask">
<div class="modal-box">
<p>Este es un modal global</p>
<button @click="showModal = false">Cerrar</button>
</div>
</div>
</Teleport>
</template>
Ejemplo: Suspense para manejar la carga de componentes asíncronos
<template>
<Suspense>
<!-- Slot por defecto: contenido asíncrono -->
<template #default>
<AsyncUserProfile /> <!-- Componente asíncrono que usa await internamente -->
</template>
<!-- Slot fallback: contenido que se muestra durante la carga -->
<template #fallback>
<div class="loading">Cargando...</div>
</template>
</Suspense>
</template>
Compatibilidad con Tree-shaking
Vue3 convierte todas las API globales en exportaciones con nombre (Named Export). Gracias a la capacidad de Tree-shaking de herramientas de empaquetado como Vite / webpack, las API no utilizadas no se incluyen en el producto final.
Ejemplo: importar APIs bajo demanda
// Vue.nextTick(...)
// Vue.set(obj, 'key', value)
// Vue3: importación bajo demanda, el paquete solo incluye las funciones realmente utilizadas
import { ref, computed, watch, nextTick, onMounted } from 'vue'
// Solo se importan estas API, las demás no utilizadas (como watchEffect, provide, etc.) no entran en el producto final
Hooks del ciclo de vida
Los hooks de ciclo de vida correspondientes a la Composition API de Vue3 comienzan todos conony se invocan dentro desetup.
| Vue2 (Options API) | Vue3 (Composition API) | Momento de activación |
|---|---|---|
beforeCreate | — (el propio setup lo reemplaza) | Antes de la inicialización de la instancia |
created | — (el propio setup lo reemplaza) | Creación de la instancia completada |
beforeMount | onBeforeMount | Antes del montaje |
mounted | onMounted | Montaje completado, se puede acceder al DOM |
beforeUpdate | onBeforeUpdate | Antes de la actualización de datos y el re-renderizado del DOM |
updated | onUpdated | Después de completar el re-renderizado del DOM |
beforeDestroy | onBeforeUnmount | Antes de la destrucción del componente (nombre cambiado) |
destroyed | onUnmounted | Destrucción del componente completada (nombre cambiado) |
Ejemplo: uso de los hooks del ciclo de vida
import { ref, onMounted, onUnmounted } from 'vue'
const timer = ref(null)
const count = ref(0)
// Se ejecuta después de que el componente se monta (se puede manipular el DOM de forma segura)
onMounted(() => {
console.log('Componente montado')
// Inicia un temporizador, incrementa el contador cada segundo
timer.value = setInterval(() => {
count.value++
}, 1000)
})
// Se ejecuta al desmontar el componente (limpieza de efectos secundarios, evita fugas de memoria)
onUnmounted(() => {
clearInterval(timer.value)
console.log('Temporizador limpiado')
})
</script>
<template>
<p>Transcurrido: {{ count }} segundos</p>
</template>
Soporte completo de TypeScript
La biblioteca principal de Vue3 está completamente reescrita en TypeScript, proporcionando una inferencia de tipos precisa. Junto con<script setup lang="ts">, se puede usar TypeScript directamente en componentes de un solo archivo sin configuración adicional.
Ejemplo: usar TypeScript en script setup
import { ref, computed } from 'vue'
// Interface define la estructura de datos dentro del componente
interface User {
id: number
name: string
email?: string
}
// ref infiere el tipo automáticamente según el valor inicial, también se puede especificar explícitamente
const user = ref<User>({
id: 1,
name: 'EJEMPLO',
})
// defineProps: declara e infiere los tipos de las props
const props = defineProps<{
title: string //Obligatorio
count?: number //Opcional
}>()
// defineEmits: declara y verifica los tipos de eventos personalizados
const emit = defineEmits<{
(e: 'update', value: number): void
(e: 'close'): void
}>()
const displayName = computed(() => user.value.name.toUpperCase())
function handleUpdate() {
emit('update', 42)
}
</script>
Ámbitos de aplicación
Como un ecosistema completo de frameworks frontend, Vue3 cubre una amplia gama de escenarios, desde aplicaciones de una sola página hasta renderizado del lado del servidor, y desde Web hasta móvil.
Aplicaciones de una sola página (SPA)
Este es el escenario de uso más clásico de Vue3. Combinado conVue Router 4para implementar el enrutamiento frontend,Pinia(la biblioteca de gestión de estado recomendada oficialmente por Vue3, que reemplaza a Vuex) para gestionar el estado global, se pueden construir aplicaciones de una sola página completamente funcionales.
Tipos de proyectos típicos: sistemas de administración de backend empresarial, paneles de datos, frontend de plataformas de comercio electrónico.
Renderizado del lado del servidor (SSR) y generación de sitios estáticos (SSG)
Nuxt 3es un framework full-stack basado en Vue3, con integración profunda de SSR y SSG. Maneja automáticamente la complejidad del renderizado del lado del servidor, permitiendo a los desarrolladores construir aplicaciones amigables con SEO como si escribieran componentes Vue normales.
Escenarios adecuados: sitios de contenido, blogs, sitios de documentación, páginas de aterrizaje de marketing.
Móvil y multiplataforma
uni-appSoporta desarrollar simultáneamente mini programas de WeChat, mini programas de Alipay, H5 y Apps (iOS/Android) con sintaxis Vue3.Ionic + Vue3es adecuado para construir aplicaciones móviles híbridas de alta calidad.
Aplicaciones de escritorio
Electron + Vue3(a través de cadenas de herramientas como electron-vite) se pueden empaquetar aplicaciones Vue3 como programas de escritorio multiplataforma.Tauri + Vue3es una alternativa popular en los últimos años, usa Rust como backend, con aplicaciones más pequeñas y mejor rendimiento.
Ecosistema de bibliotecas de componentes de UI
En el ecosistema de Vue3 hay una gran variedad de bibliotecas de componentes maduras para elegir:
| Biblioteca de componentes | Posicionamiento | Escenarios de uso |
|---|---|---|
| Element Plus | Biblioteca de componentes de escritorio para PC, versión Vue3 de Element UI | Administración de backend empresarial, aplicaciones con uso intensivo de datos |
| Ant Design Vue | Implementación Vue de Ant Design, con estándares de diseño maduros | Sistemas de administración, aplicaciones empresariales |
| Vant 4 | Biblioteca de componentes móviles, ligera y de alto rendimiento | H5 móvil, mini programas de WeChat |
| Vuetify 3 | Biblioteca de componentes de estilo Material Design | Aplicaciones web orientadas al consumidor |
| Naive UI | Escrito en TypeScript, fuerte capacidad de personalización de temas | Proyectos que requieren personalización profunda del tema |
| shadcn-vue | Conjunto de componentes basado en Radix UI y Tailwind, con código copiable | Proyectos que valoran la singularidad de la UI |
Historia de desarrollo
Vue.js pasó de ser un proyecto personal a uno de los tres frameworks frontend más importantes del mundo. Cada versión importante está impulsada por necesidades de ingeniería claras.
Orígenes (2013 - 2014)
Vue.js fue creado por Evan You mientras trabajaba en Google. En 2013, exploró la experiencia de desarrollo de Angular, con la esperanza de extraer la parte que más le gustaba — el mecanismo de actualización de vistas impulsado por datos — y eliminar lo que consideraba demasiado pesado.
En febrero de 2014, se lanzó públicamente Vue.js 0.8.0. A partir de entonces, recibió atención de la comunidad de Laravel y gradualmente ganó reconocimiento en la comunidad de JavaScript.
Era de Vue 1.x (2015)
En octubre de 2015, Vue 1.0 se lanzó oficialmente con el nombre en clave Evangelion (Neon Genesis Evangelion). Ese mismo año,Vue Router（2015.08）、Vuex（2015.11）、Vue CLI(2015.12) se publicaron sucesivamente, marcando la evolución de Vue de una biblioteca de capa de vista a un framework progresivo completo.
Era de Vue 2.x (2016 - 2020)
En octubre de 2016, se lanzó Vue 2.0, introduciendo el enfoque de DOM virtual (inspirado en React), soporte para renderizado del lado del servidor (SSR), con una gran mejora de rendimiento.
La era Vue 2 fue la fase de expansión más rápida del ecosistema Vue: surgieron bibliotecas de componentes como Element UI, apareció Nuxt.js, y Vue se convirtió en uno de los frameworks frontend con más estrellas en GitHub del mundo.
En febrero de 2019, se lanzó Vue 2.6, con el nombre en clave Macross. Fue la última versión importante de Vue 2, sirviendo de puente entre el pasado y el futuro.
Lanzamiento de Vue 3.0 (2020)
El desarrollo de Vue3 comenzó a finales de 2018 y duró unos dos años, pasando por más de 30 RFC (Request for Comments), más de 2600 commits y 628 PR de 99 contribuyentes.
El 18 de septiembre de 2020, Vue 3.0 fue lanzado oficialmente, con el nombre clave One Piece (Rey de los Piratas). Cambios principales:
- El sistema reactivo se basa en
Proxyla reescritura - Introducción de la Composition API
- Soporte completo de TypeScript
- Se añaden Fragment, Teleport y Suspense
- Soporte de Tree-shaking, reducción significativa del tamaño del paquete
Etapa de perfeccionamiento del ecosistema (2021 - 2022)
| Tiempo | Versión / Evento | Importancia de hito |
|---|---|---|
| 2021-08 | Vue 3.2 | <script setup>El azúcar sintáctico se estabiliza oficialmente,<style> v-bindsoporta enlace de CSS dinámico, convirtiéndose en una de las versiones más populares de Vue 3 |
| 2022-02 | Vue 3 se convierte en la versión predeterminada | En el sitio web oficial de vue.js y en npmvueLa versión predeterminada del paquete cambia de 2 a 3, marcando el dominio oficial del ecosistema Vue3 |
| 2022-05 | Pinia se convierte en la recomendación oficial | El plan de Vuex 5 se suspende, Pinia se convierte en la biblioteca de gestión de estado oficialmente recomendada para Vue3 |
| 2022 | Vue 3.3 | Soporte mejorado para componentes genéricos, mejoradefinePropsde la inferencia de tipos; la experiencia con TypeScript mejora significativamente |
Etapa de optimización continua (2023 - actualidad)
| Tiempo | Versión | Características importantes |
|---|---|---|
| 2023-12 | Vue 3.4 | Reescritura del analizador de plantillas (rendimiento mejorado aproximadamente 2 veces), optimización del sistema reactivo (reducción de activaciones de cálculo innecesarias),defineModelLa macro se estabiliza oficialmente (simplifica el enlace bidireccional v-model) |
| 2024-09 | Vue 3.5 | La desestructuración reactiva de Props se estabiliza oficialmente (se puede desestructurar manteniendo la reactividad sin toRef),useTemplateRefNueva API, hidratación perezosa SSR (Lazy Hydration) |
| 2025 (en desarrollo) | Vue 3.6 | Integración del sistema reactivo Alien Signals (la memoria de seguimiento de dependencias se reduce aproximadamente un 14%), Vapor Mode entra en Alpha (omite completamente el Virtual DOM, el tamaño del paquete se reduce de 50KB a aproximadamente 6KB, el tiempo de montaje de 100.000 componentes es de aproximadamente 100ms) |
Vapor ModeEs la dirección técnica más importante para el futuro de Vue3: mediante análisis estático en tiempo de compilación, compila las plantillas directamente en código preciso de operación del DOM nativo, evitando por completo el proceso de creación y diff del Virtual DOM. Puede coexistir con el modo Virtual DOM existente y admite migración progresiva. Actualmente solo admite
<script setup>la Composition API; la Options API no aplica.
Posicionamiento de Vue3 entre los tres grandes frameworks
Vue3, React y Angular son los tres frameworks principales del desarrollo frontend actual; conocer el posicionamiento de cada uno ayuda a tomar decisiones técnicas más adecuadas.
| Dimensión de comparación | Vue3 | React 18+ | Angular 17+ |
|---|---|---|---|
| Posicionamiento | Framework progresivo, enrutamiento y gestión de estado proporcionados oficialmente | Biblioteca de UI, ecosistema liderado por la comunidad | Framework completo, todo tiene solución oficial |
| Estilo de sintaxis | Componentes de archivo único (.vue), sintaxis de plantilla intuitiva | JSX, escribir HTML en JavaScript | Componentes + plantillas + decoradores, alto grado de ingeniería |
| Curva de aprendizaje | Relativamente suave, la sintaxis de plantilla es cercana a HTML | Media, requiere comprender JSX y el modelo mental de Hooks | Empinada, muchos conceptos (módulos, inyección de dependencias, RxJS) |
| TypeScript | Biblioteca central reescrita en TS, buen soporte | Bueno, requiere @types/react | TypeScript por defecto, integración profunda |
| Rendimiento | Excelente, reactividad de grano fino, actualizaciones precisas | Bueno, el Compiler de React 19 optimiza aún más | Bueno, el mecanismo de Signals mejora continuamente |
| Escala aplicable | Adecuado para proyectos de pequeña, mediana y gran escala | Todo tipo de escalas, con casos maduros en proyectos muy grandes | Proyectos empresariales de gran escala, altos requisitos de estándares de equipo |
| Cuota de mercado en China | La más alta, utilizada por muchas empresas | Alto | Relativamente baja |
En el ecosistema frontend chino, Vue3 tiene la tasa de uso más alta; bibliotecas de componentes con documentación china completa como Element Plus y Ant Design Vue han reducido enormemente la barrera de adopción para las empresas. Si tu objetivo es el mercado laboral chino, Vue3 es uno de los frameworks que más vale la pena dominar prioritariamente.
Limitaciones de Vue3
Conocer los límites de Vue3 puede ayudarte a tomar decisiones técnicas más racionales.
| Limitación | Manifestación específica | Sugerencias para abordarlo |
|---|---|---|
| Costo de decisión por la coexistencia de Options API y Composition API | Dos estilos de API coexisten; el equipo debe acordar estándares unificados, de lo contrario el estilo del código será inconsistente | En proyectos nuevos, usar de manera uniforme<script setup> + Composition API |
| Carga mental del .value de los datos reactivos | refEn scripts se necesita.value, en las plantillas se desempaqueta automáticamente; los principiantes pueden confundirse fácilmente | Usar el plugin Volar: el IDE dará sugerencias; una vez formado el hábito, dejará de ser un problema |
| Complejidad de la gestión de estado en aplicaciones grandes | El soporte de Pinia para la gestión de estado en escenarios muy grandes y de alta concurrencia no es tan maduro como el de Redux | En aplicaciones muy grandes se puede evaluar Pinia + esquema de división modular |
| Costo de hidratación en renderizado del lado del servidor | Las páginas SSR requieren "hidratación" (Hydration); en dispositivos de gama baja, la inicialización puede tardar más | Vue 3.5 introdujo Lazy Hydration; el Vapor Mode de Vue 3.6 mejorará aún más |
| Riqueza del ecosistema internacional | En comparación con React, la actividad de la comunidad en inglés de Vue y los recursos de Stack Overflow son algo menores | La documentación oficial es de altísima calidad, la documentación en chino es completa; consultar primero la documentación oficial |