Vue.js es un framework progresivo para la construcción de interfaces de usuario. La migración de Vue 2 a Vue 3 representa un avance significativo con mejoras en rendimiento, nuevas características y cambios de paradigma en la API.

1. Rendimiento y Motor de Renderización

Vue 3 incluye un motor de renderizado virtual DOM reescrito desde cero. Este nuevo motor optimiza las operaciones de parcheo, reduce el uso de memoria y mejora el rendimiento general, especialmente en aplicaciones de gran escala.

2. Sistema de Reactividad

La implementación interna del sistema reactivo difiere fundamentalmente. Vue 2 se basaba en Object.defineProperty, lo que presentaba limitaciones para detectar cambios en propiedades de objetos o índices de arrays. Vue 3 utiliza la API nativa Proxy, que ofrece una detección de cambios más completa y eficiente.

// Vue 2
this.$set(this.objeto, 'nuevaPropiedad', valor);
this.$set(this.array, indice, nuevoValor);

En Vue 3, la reactividad es transparente:

// Vue 3
import { reactive } from 'vue';
const estado = reactive({ listado: [] });
estado.listado[indice] = nuevoValor; // Detectado automáticamente

Vue 3 introduce la Composition API, ofreciendo un sistema alternativo y más flexible para organizar la lógica del comopnente en comparación con la Options API de Vue 2. Esto facilita enormemente la reutilización de lógica entre componentes.

// Vue 2 - Options API
export default {
 data() {
   return {
     contador: 0
   }
 },
 methods: {
   sumar() {
     this.contador++;
   }
 },
 mounted() {
   console.log('Componente montado');
 }
}

El mismo componente refactorizado con la Composition API de Vue 3:

// Vue 3 - Composition API
import { ref, onMounted } from 'vue';

export default {
 setup() {
   const contador = ref(0);
   const sumar = () => {
     contador.value++;
   };

   onMounted(() => {
     console.log('Componente montado');
   });

   return { contador, sumar };
 }
}

Vue 3 permite que un componente tenga múltiples nodos raíz en su template. Esto elimina la necesidad de envolver todo el contenido en un único elemento contenedor, un requisito obligatorio en Vue 2.

<template>
  <header>Encabezado</header>
  <main>Contenido principal</main>
  <footer>Pie de página</footer>
</template>

5. Nuevas Primitivas del Framework

Vue 3 añade nuevas características como Teleport, que permite renderizar un subárbol del DOM en cualquier lugar fuera del DOM del componente padre, y Suspense, para gestionar estados de carga de componentes asíncronos.

<!-- Ejemplo de Teleport -->
<teleport to="#modales">
  <div class="overlay">Contenido del teletransporte</div>
</teleport>

6. Hooks de Ciclo de Vida

Los hooks de ciclo de vida en la Composition API se importan como funciones y tienen un prefijo on (e.g., onMounted, onUpdated). Su ejecución dentro de setup() los vincula al ciclo de vida del componente actual.

7. Integración con TypeScript

Vue 3 fue rediseñado con TypeScript en su núcleo. Esto proporciona una inferencia de tipos mucho más precisa y una experiencia de desarrollo con TypeScript más fluida, sin necesidad de definiciones de tipos separadas.

8. Mejoras en la Ecosistema y Herramientas

Las bibliotecas oficiales del ecosistema, como Vue Router y Vuex (o su sucesor Pinia), se actualizaron para aprovechar las nuevas capacidades y ofrecer una mejor integración con la Composition API y TypeScript.