Migrando a Vue 3

Entonces, bienvenidos de nuevo. Y bienvenidos de nuevo a la charla, ¿cómo se llama? ¿Qué aplicaciones se pueden ejecutar en React? No se puede ejecutar un tiempo de ejecución en React. Y hoy estamos aquí para hablar sobre el trabajo con APIs que han sido reescritas para que tus aplicaciones web se ajusten y para tu experiencia de programación.

Y antes de empezar, echemos un vistazo a algunas de las características que hemos creado y puesto a tu disposición dentro de React. Así que aquí tienes algunas de las características que hemos creado en nuestra demostración. La primera es esencialmente la versión de migración a la vista tres. Es una versión especial de la vista tres que te permite ejecutar tu aplicación existente en el modo vista dos. Te proporciona advertencias útiles sobre características obsoletas y ofrece un entorno seguro para actualizar tu código de forma incremental.

Para practicar y ver cómo se utiliza la versión de migración, vamos a utilizar una sencilla aplicación de muestra. Puedes acceder al repositorio clonando este enlace aquí, y veremos cómo realizamos esos cambios para actualizarlo a la vista tres con la ayuda de la versión de migración.

Antes de empezar, echemos un vistazo a esa aplicación de muestra en el navegador. Como puedes ver, es muy sencilla. Solo tienes que pulsar ese botón de `pop` y se quitará el número de la parte inferior de la lista. Para hacer este proceso de migración más realista, hemos añadido algunas características obsoletas a esta aplicación de demostración, que tendremos que actualizar para que sea compatible con la vista tres. Ahora que hemos visto la aplicación que vamos a actualizar, ¿cuál es el proceso de cuatro pasos? La instalas, corriges los errores, corriges las advertencias y luego la desinstalas.

Así que vamos a instalarlo. Dado que muchas personas utilizan Vue CLI para crear sus aplicaciones Vue2, voy a mostrar cómo actualizar una aplicación generada por Vue CLI. Si estás utilizando Vite u otro sistema de compilación, puedes consultar el README en el repositorio de la versión de migración en GitHub. Pero siguiendo con Vue CLI, debemos asegurarnos de tener la versión más reciente instalada. Por lo tanto, debemos ejecutar VueUpgrade en nuestra terminal.

Necesitaremos utilizar JSON para instalar Vue 3, la propia versión de migración y el compilador para componentes de un solo archivo. Observa cómo también debemos eliminar Vue 2 y el compilador de plantillas de Vue. A continuación, podemos instalar las dependencias y hay un paso más para hacer que la versión de migración funcione. Debemos crear un archivo vue.config para configurar algunas opciones del compilador. Puedes encontrar este archivo de configuración en la rama Ending de nuestro código de demostración, y también quiero informarte de que tenemos una serie de blogs completos sobre esta versión de migración. Puedes encontrar todo este contenido, todo este código, en vuemastery.com/blog.

Con eso fuera del camino, ahora podemos ejecutar nuestra aplicación, pero verás que nos encontramos con un error. En realidad, esto es una buena señal. Está demostrando que la versión de migración está haciendo su trabajo y nos está informando que hay algo incorrecto en nuestro código, algo obsoleto. Esto nos lleva al siguiente paso en nuestro flujo de trabajo de migración, donde corregimos los errores. La fuente de este error proviene de la API predeterminada de nuestra aplicación de muestra. Para solucionarlo y hacer que sea compatible con Vue 3, vamos a eliminar el atributo funcional y también eliminar las props. Ahora el error debería haber desaparecido. Pero es posible que notes que todavía tenemos algunas advertencias en la consola. Una se refiere al montaje global, otra al renderizado de funciones y otra al array de observación. Así que pasemos a nuestro tercer paso, donde solucionamos esas advertencias. Podemos eliminar dos de esas advertencias importando y utilizando create app para inicializar nuestra aplicación. Ahora, si actualizas la aplicación en el navegador, verás una nueva advertencia. Para solucionar este último problema, solo necesitamos agregar la opción deep aquí, como se indica en la advertencia. Ahora que hemos solucionado nuestros errores y advertencias, podemos pasar al último paso, donde desinstalamos la versión de migración del package JSON y eliminamos el archivo de configuración. Ahora podemos ejecutar npm install y servir nuestra aplicación Vue 3 recién actualizada. Por supuesto, la aplicación de demostración que acabamos de recorrer fue bastante sencilla. Solo tenía algunos errores y advertencias y fue rápido de solucionar. En tu caso, en el mundo real, te encontrarás con muchas situaciones diferentes, errores, advertencias y obsolescencias que son únicas para tu caso de uso. Para facilitar la actualización de tus propias aplicaciones, creamos una hoja de trucos que enumera todas las características de Vue 2 que son incompatibles con Vue 3 y que te darán esos errores. Y te guía a través de todas las características que fueron reemplazadas, eliminadas y renombradas en Vue 3. Puedes descargar la hoja de trucos de forma gratuita en vmastery.com. Con todo esto, espero que te sientas más seguro y preparado para actualizar tus aplicaciones Vue 2 a Vue 3. Gracias por ver.