Nuevas formas de Vue

Hola a todos, me alegra estar aquí en Vue London. Hoy mi tema es las nuevas formas de Vue, cómo las nuevas herramientas y técnicas afectan la forma en que usamos Vue y construimos aplicaciones. Mi nombre es Anthony Fu, y soy miembro colaborador de Vue y Vite. También soy el creador de SlideDev, Vueuse, VDesk y otros proyectos de código abierto. Soy un fanático del código abierto y actualmente trabajo en Nuxt Labs. Mi nombre de usuario en GitHub es antfu, también puedes encontrarme en Twitter. Antes de comenzar, quiero agradecer a todos mis patrocinadores por apoyar mi trabajo. Si encuentras mi trabajo útil, también puedes patrocinarme en GitHub, significaría mucho para mí.

Entonces hablemos sobre el tema de hoy, las nuevas formas de Vue. Comencemos hablando de Vue 2 primero. Debajo de eso, tenemos los componentes de archivo único de Vue. En este componente, tenemos una etiqueta de plantilla y una etiqueta de script. En la etiqueta de script, necesitaremos importar las cosas que queremos. Por ejemplo, import Vue from 'vue' y luego exportar el objeto de componentes predeterminado usando Vue.extend, y luego necesitaremos registrar nuestros componentes, hacer cosas y declarar datos y métodos. El problema aquí es que tenemos demasiado código de plegado de Scala para cada componente, y también las mezclas están limitadas para la reutilización de nuestro código y también tenemos algunos problemas de soporte de TypeScript.

Para resolver esto, en Vue 3, introdujimos un nuevo conjunto de API llamado API de composición. Hagamos una comparación rápida aquí. A la izquierda, tenemos la API de opciones, y a la derecha, tenemos la nueva API de composición. Como puedes ver, en la API de opciones, solíamos tener múltiples propiedades para el objeto. Por ejemplo, tenían método, crear, y así sucesivamente. Pero en la API de composición, solo tenemos una función llamada setup. Las funciones del ciclo de vida ahora se proporcionan como hooks, por lo que puedes usarlas dentro de nuestras funciones de setup. Así que tenemos todo dentro del contexto único. De esta manera, podemos tener un mejor soporte de TypeScript. Pero además de eso, lo más importante es que podemos tener una mejor composabilidad. Por ejemplo, tenemos un componente con las funciones de setup. Si queremos reutilizar esta lógica, simplemente podemos copiarla y tenerla dentro de nuevos archivos y envolverla con las funciones. En este caso, lo llamamos useDark. Entonces podemos refactorizar nuestros componentes para importar las funciones useDark y reutilizarlas. Los componentes se comportarán exactamente igual que antes, pero ahora podemos reutilizar nuestras funciones dentro de otros componentes y tener una mejor organización de nuestra lógica.

Entonces hablemos sobre la sintaxis de configuración de script. Como puedes ver, incluso con la nueva API de composición, tenemos muchos códigos de andamiaje en nuestros componentes. Por ejemplo, en este caso, las líneas resaltadas son las cosas que realmente nos importan, pero debemos escribir el resto para que Vue lo entienda. En la nueva sintaxis de configuración de script, podemos declararlos todos en el nivel superior. Y las variables, funciones y componentes dentro de la configuración de script están disponibles directamente dentro de los componentes. Esto se introdujo inicialmente en Vue 3.1 como una función experimental y ahora es estable en Vue 3.2.

Otra nueva característica es la sintaxis V-bind dentro de la etiqueta de estilo. En el pasado, si queríamos tener estilos dinámicos en los componentes, primero debíamos declarar algunos datos reactivos dentro de la sección de datos y luego vincular los datos dentro de la plantilla. Pero ahora, con V-bind, podemos tener la vinculación dentro de nuestra etiqueta de estilo, lo que nos permite tener una mejor organización de la plantilla y el estilo.

Finalmente, hablemos de la nueva herramienta predeterminada, Vite. ¿Qué es Vite? Apuesto a que muchos de ustedes ya han oído hablar de eso, pero en caso de que no, hagamos una breve introducción. Solíamos tener empaquetadores como Webpack y Rollup. El problema con ellos es que generalmente están diseñados para la construcción de producción y necesitan empaquetar todo el proyecto para iniciar el servidor de desarrollo. También implican configuraciones complejas y las sustituciones de módulos se vuelven más lentas a medida que el proyecto crece. Ahora tenemos servidores de desarrollo, como Snowpack y Vite. Estos servidores de desarrollo están diseñados específicamente para el desarrollo web. Aprovechamos el soporte nativo de ESM del navegador y ya no necesitamos empaquetar el código. El servidor se inicia de inmediato y solo transpilamos los módulos según sea necesario. De esta manera, también tenemos sustituciones de módulos en tiempo real y muchas más posibilidades. Entonces, ¿qué nos ofrecen Vue 3 y Vite? No solo un mejor rendimiento y una mejor experiencia de desarrollo, sino también nuevas formas de utilizar Vue. Veamos cómo usamos los componentes de Vue. Primero, necesitamos importarlos y darles un nombre, y luego registrar los componentes para poder usarlos en la plantilla. El problema aquí es que nuestro código se vuelve bastante verboso y el nombre de cada componente se repite al menos cuatro veces. Esto no solo ralentiza nuestro desarrollo, sino que también cambiar el nombre de los componentes se vuelve bastante frustrante. Con la nueva sintaxis de configuración de script, ya no es necesario registrar los componentes. Pero el problema es que el nombre aún se repite tres veces. ¿Y si podemos mejorarlo? Introduzcamos la importación automática de componentes a través del complemento de componentes de Vite. Dado que ya conocemos el nombre de cada componente, podemos mapearlos directamente para usarlos en la plantilla. ¿Cómo lo hacemos? Utilizamos la resolución de componentes en tiempo de compilación para los componentes en el directorio de componentes de origen. El uso es similar al de los registros globales, pero la diferencia es que con la importación automática, podemos lograr una mejor división de código y ya no necesitamos hacer el registro manual.

Incluso más, podemos omitir la resolución en tiempo de ejecución para mejorar aún más el rendimiento. Presentamos la auto-importación de componentes a través del complemento de componentes de Vite. Dado que ya conocemos los nombres de archivo de cada componente, podemos hacer la vinculación y eso se puede usar directamente dentro de las plantillas.

Como puedes ver, eso es todo lo que necesitamos. Entonces, ¿cómo funciona esto? Primero, utilizamos la resolución de componentes en tiempo de compilación para los componentes en el directorio de origen slash components. El uso se parece a los componentes globales, pero la diferencia es que con la auto-importación, tenemos un mejor soporte para la división de código y tampoco es necesario el registro manual. Incluso más, con este enfoque, podemos omitir la resolución en tiempo de ejecución y mejorar aún más el rendimiento.

Entonces, desglosemos cómo funciona la compilación. Si copias este código en nuestros entornos de prueba en línea, sfc.vuejs.org, puedes ver cómo se compila mediante el compilador SFC en el siguiente código. Nuestro uso de tres componentes se compila en estas tres declaraciones. La función resolveComponents es un ayudante interno de Vue para resolver los componentes de la instancia actual del componente. Entonces, ¿qué podemos hacer en Vite para que funcione la auto-importación? Podemos escribir un complemento muy simple de Vite aquí. Primero, utilizamos enforcePorts para asegurarnos de que el complemento se ejecute después de la compilación de Vue. Y luego utilizamos el gancho transform para modificar el código. En el gancho transform, filtramos los archivos que no son de Vue. Y finalmente, reemplazamos todo el uso de resolveComponent por la importación real del componente. Si estás interesado, puedes consultar la documentación de Vite para obtener más información. Y como resultado, eliminamos el uso de resolveComponents y los importamos directamente. Y con eso, la auto-importación funciona.

Otra cosa que vale la pena mencionar es que, dado que Vite es un servidor de desarrollo, podemos tener más imaginación aquí. Con el complemento de Vite en la especificación, ahora puedes inspeccionar la relación entre los módulos y cómo se transforma el módulo para cada complemento. Esto puede ser realmente útil para depurar complementos o comprender cómo funciona Vite internamente. Entonces, una cosa que vale la pena mencionar es que, dado que Vite es un servidor de desarrollo, podemos tener más imaginación aquí. Con el complemento de Vite en la especificación, ahora puedes tener una interfaz de usuario para inspeccionar el estado intermedio de cada transformación para cada módulo y también la relación entre los módulos. Esto puede ser realmente útil para los autores de complementos para depurar sus complementos y también para principiantes para comprender mejor cómo funciona Vite internamente. Entonces, volvamos a la auto-importación. Similar a la auto-importación de componentes, incluso podemos hacer posible la auto-importación de la API. Al escanear el uso de cada función, ahora podemos inyectar la importación desde la vista cuando no está presente. De esta manera, podemos tener nuestros componentes aún más claros. Hagamos un resumen rápido del ecosistema de Vite.

Primero tenemos los complementos de Vite para la auto-importación de componentes, el complemento de Vite para la importación automática de la API, el complemento de Vite para iconos bajo demanda, el complemento de Vite para inspeccionar el estado intermedio de Vite, el complemento de Vite para páginas con enrutamiento basado en archivos similar a Nuxt o Next.js, el complemento de Vite para Windows CSS que es similar a Tailwind bajo demanda pero con una compilación y HMR mucho más rápidos, el complemento de Vite para Node que trae HMR de Vite para aplicaciones de backend de Node.js, el complemento de Vite para importaciones de estilos bajo demanda y mucho más. Puedes encontrar más en nuestra lista oficial de increíbles complementos de Vite.

Entonces, Vite ha inspirado muchos complementos y mejores formas de mejorar nuestra experiencia de desarrollo. Pero eso no se limita a Vite. Vamos a llevarlos a tus proyectos existentes hoy. Presentamos Unplugin, que es uno de los proyectos en los que estoy trabajando en Nuxt Labs. Unplugin es una interfaz de complemento universal para Webpack, Vite, Rollup y más. De esta manera, puedes escribir una vez tus complementos y que funcionen en muchas herramientas y frameworks principales. Echemos un vistazo a cómo funciona Unplugin.

Así que a la izquierda tenemos nuestros complementos tradicionales de Vite. Para convertirlos en Unplugin, simplemente los envolvemos con una función createUnplugin y luego podemos acceder a los complementos de Vite a través de unplugin.vite, unplugin.rollup y unplugin.webpack. Con eso, podemos mover muchos complementos de Vite a Unplugins. Movemos el complemento de Vite para componentes a Unplugin para componentes de vista. La auto-importación de componentes de Vite se convierte en la auto-importación de Unplugin. Y durante esta refactorización, también hicimos posible para Vue, React, Svelte, Verlina o cualquier framework que te guste. Y también el complemento de Vite para iconos ahora es Unplugin para iconos. Con eso, puedes combinar cualquier combinación de la siguiente lista como desees.

¿Y qué hay de Vue 2? Supongo que algunos de ustedes todavía están atrapados en Vue 2 debido al soporte de IE o al proceso de migración de código. Pero no te preocupes, te tenemos cubierto. Para Vue 2, proporcionamos polyfills para la funcionalidad del código. Para Composition API, proporcionamos el paquete vue-composition-api para devolver la Composition API a tu aplicación Vue. Para la configuración cuadrada y refsugar, proporcionamos el paquete Unplugin vue 2 square setup. Ten en cuenta que esto también es un Unplugin, lo que significa que funcionará en Vue CLI, Nuxt 2 o tu configuración personalizada de Webpack. Para el soporte de Vite, tenemos el complemento Vite para Vue 2 y Nuxt Vite, que llevan la experiencia de Vite a tus aplicaciones de Nuxt 2 manteniendo el gran ecosistema de Nuxt. Y para la mejora del desarrollador, los complementos mencionados anteriormente también admiten Vue 2 de forma nativa. En resumen, esto es lo que puedes obtener hoy, sin importar si estás en Vue 2 o 3, Nuxt 2, Vue CLI o Vite. Puedes eliminar los registros de componentes, utilizar la última sintaxis de configuración cuadrada y también la Composition API de Vue. También proporcionamos algunas plantillas de inicio para que las obtengas rápidamente. Vite es una de las plantillas de inicio de Vite más populares que te brinda la mejor experiencia de Vue. Vite Nuxt trae la experiencia de Vite a Nuxt 2. También tenemos Vite para extensiones web. Para probarlo, puedes ejecutar el siguiente comando en tu máquina. Por último, un pequeño adelanto, Nuxt 3 tendrá muchas de estas características mencionadas hoy integradas directamente para que las puedas usar de inmediato. Eso es todo por hoy. Las diapositivas se pueden encontrar en mi sitio antfu.me. Gracias.