Vue3: Desarrollo Moderno de Aplicaciones Frontend

Soy Mikhail y dirigiré la workshop de hoy sobre las características de Vue 3. Estoy realmente contento de ver muchos mensajes en el chat. Genial, genial, chicos. Veo que definitivamente pueden oírme, y espero que puedan ver la imagen claramente. Así que si en el camino hay alguna perturbación con el video o la calidad del sonido, por favor, háganmelo saber. Eso no debería suceder normalmente, pero veremos. Genial.

Entonces vamos... Creo que ya es suficiente tiempo para que la gente se una, sigamos adelante. Entonces, ¿de qué vamos a hablar hoy? Principalmente nos centraremos en Vue 3, la tercera versión. Y comenzaré con una introducción básica luego haré una inmersión más profunda en las características de Vue 3, principalmente la composition API, y luego entraremos en modo demo, cuando estaré mostrando la mayoría de los elementos que trae la composition api. Permítanme presentarme rápidamente, Mikhail. He estado desarrollando web durante más de una década. Actualmente trabajo como líder de equipo en ING Bank en Ámsterdam. Empecé a usar Vue alrededor de 2016, cuando todavía era la versión 1, y de hecho cuando Geiss lanzó la versión 2, me fascinó lo fácil y componible que es construir interfaces de usuario web complejas. Y también el ecosystem documentation, todo era realmente agradable, así que me convertí en un gran fan de este framework. Desde entonces, lo he estado usando en muchos proyectos comerciales y personales también.

Pueden seguirme en Twitter. Este es un conjunto de caracteres difícil de pronunciar. Así que, por favor, si no pueden escribirlo, lo escribiré en el chat. Así que, estaré encantado de responder a sus preguntas en el chat, aquí durante la sesión, pero también síganme en Twitter. Intentaré publicar algunas cosas relacionadas con Vue y el desarrollo de front-end de vez en cuando.

Sí. También hagamos una rápida ronda de presentaciones. Eso también me ayudará a entender mejor el nivel de la audiencia y también servirá como una introducción para que sepamos la composición de los participantes de hoy. Entonces, ¿podrían escribir en una breve frase su pila técnica, qué otros frameworks o bibliotecas, lenguajes utilizan a diario. Si todavía están estudiando, también está bien. Solo puede ser back y front y no sé, diseño web, ciencia de datos, lo que sea, solo en una línea, algo como PHP, tres años, eso debería funcionar. Así que por favor compartan su pila actual o la pila que les interesa. Si están usando vue, por supuesto, sería bueno saber qué versión están usando principalmente. Así que por favor, les daré un minuto para esto y luego seguiremos adelante.

Sí, vi algunos primeros mensajes. Gracias Robert. Cambiando de Angular. Oh, esa es una historia muy conocida para mí. Sí, tuve el mismo desafío hace algunos años. Sí, creo que encontrarás muchos conceptos similares y sí, definitivamente la forma en que puedes componer componentes y reutilizar la lógica, definitivamente te debería gustar. Así que espero que te guste el viaje, Robert. Ricardo vue 2.0, barra tres. Genial, genial. Andrei, Laravel, PHP. Genial. Clement, gracias, gracias. Adam, Lucas. Bueno, muchas cosas que los chicos estaban usando aquí. Oh, bien, bien. Veo que a menudo se mencionan las vistas, lo cual es bueno porque estamos en la conferencia de Vue. Y sí, también veo que es, la versión 2.0 todavía se usa a menudo, lo cual es completamente comprensible. Es una versión estable, que estuvo con nosotros durante casi cuatro años. Y sí, incluso siendo un experto en la tercera versión, todavía a veces solo inicio un nuevo proyecto y rápidamente lo hago en la versión dos porque es como una memoria muscular y no necesitas pensar en conceptos complejos, pero sí, nos centraremos principalmente en la versión tres, que creo que es, será beneficioso para la mayoría de ustedes que todavía están usando la versión dos. Genial, genial, veo a Carloi, Barthek. Sí, gracias chicos. Gracias por todos los detalles. Realmente agradable. C Sharp desde la API de posición, Dave, jefe. Gracias, muy agradable. Genial, y también, así que estamos haciendo ahora la masterclass que es parte de la conferencia. Y por supuesto, los días en que la conferencia las actividades principales ya pasaron, pero sí, espero que les haya gustado. Escuché que hubo bastantes anuncios interesantes y charlas de los miembros del equipo central, así que estoy realmente feliz de presentar una masterclass en esta comunidad. Así que sigamos adelante, gracias por toda la información. De hecho, para aquellos que mencionaron React, tengo un par de diapositivas comparando los hooks de React con la API de Composición de Vue, así que eso también podría ser de ayuda para algunos. Oh, veo que Sergio también mencionó la masterclass de la Escuela Vue. Genial, sí, hice algo de contenido para la Escuela Vue, específicamente alrededor de la versión 3, sí. La Escuela Vue es una buena fuente de aprendizaje. Me alegra saber que la estás utilizando.

Bueno, una breve introducción sobre Vue, porque creo que la mayoría sabemos qué es, pero solo para recordar. Se llama Framework Progresivo de JavaScript. Comenzó alrededor de 2015 por un tipo llamado Ivan Yeo, que anteriormente desarrollaba AngularJS en Google. Y hoy en día, es un proyecto de código abierto super exitoso impulsado por la comunidad, que tiene, como veremos, casi 200,000 estrellas en Github. Tiene ciertas elecciones de diseño, como la lógica de la plantilla y la composición de datos para la lógica del componente, observadores, funciones calculadas, que las personas que usan Angular encontrarán familiares. Se basa en el concepto común, que se llama DOM virtual. El que también es ampliamente utilizado por React, y tiene un brillante ecosistema de herramientas. Veremos algunas de ellas hoy, como el CLI de Vue, para iniciar un proyecto, el router, para básicamente cambiar de páginas y diferentes partes de su viewport en el lado del cliente, el administrador de estado, que es un paquete separado llamado Vuex. También veremos esto hoy. También tiene soluciones de renderizado del lado del servidor como Nuxt. Así que si has visitado las charlas de la conferencia, probablemente aprendiste mucho sobre ellos. Así que hablaremos de algunos de ellos también. Y se utiliza mucho en la industria. No solo por equipos pequeños, sino también por empresas de nivel empresarial que necesitan reutilización de código y funcionalidad a escala. Entonces, sí, creo que es una excelente opción para cualquier tamaño de proyecto. Sí, solo un rápido resumen sobre el estado actual de las cosas. Sí, tenía este gráfico importado de npm compare. Y aquí puedes ver varias métricas como la cantidad de descargas de paquetes por día, supongo, o por semana, para tres frameworks principales. Así que puedes ver que Vue está teniendo constantemente el segundo lugar, que es quizás tres veces, cuatro veces menos que React. Sin embargo, en el recuento de estrellas, eso es significativamente más que para React. Creo que es un gran logro para un proyecto que es completamente comunitario, y fundado por Becca. No tiene ninguna gran corporación detrás de él. Así que creo que es realmente emocionante usar una herramienta así. Yo mismo escribí varios plugins. No son tan exitosos, pero fue una experiencia agradable, de hecho. Creo que la forma en que la documentación está alineada desde la versión dos y para la versión tres, también, lo hace realmente accesible y fácil para todos construir cosas personalizadas encima de Vue. Así que si no has probado a crear algún código reutilizable, código de código abierto para Vue, dale una oportunidad. Quizás también te guste.

Bueno. Déjame revisar. Bueno. Entonces sí, una breve mirada al campo. ¿Cómo se ve el componente típico de Vue? Así que tiene, como dije, lógica y plantillas, puedes mostrar datos de tu modelo y puedes vincularte a eventos y hacer ciertos, sí, reutilizar algunas partes de la plantilla, o reutilizar otros componentes en la plantilla. Y la parte principal está en el lado de JavaScript donde puedes definir tus propiedades, tus variables de estado usando una función de datos o un objeto de datos. Y puedes usar métodos para mutar estos datos, y puedes tener un montón de otras cosas como watch, computed, y otros tipos de variables. Así que toda esta parte básicamente se llama API de opciones.

Eso es por lo que Vue 2 es famoso. Está en el núcleo de su API, digamos que defines todo lo que necesitas en el componente en esas propiedades del objeto. Y luego interactúas dentro de esta lógica usando esta referencia que básicamente ayuda a acceder a cualquier parte de, cualquier variable o cualquier método dentro del componente. Así que como veremos más adelante, sí, como probablemente todos saben, la API de opciones es algo que actualmente todavía es soportada en la versión tres, pero va a ser deprecada en el futuro y estamos deshaciéndonos lentamente de ella.

Así que una nota importante antes de continuar, intentaremos centrarnos en cómo reutilizar ciertas piezas de code, cierta funcionalidad dentro, dentro de la vista tres real. Y antes de mostrar cómo puedes reutilizar code en la vista tres, sólo quería esbozar rápidamente las formas existentes para reutilizar code y lógica en la versión dos, la mayoría de ellas todavía están disponibles en, en entre. Así que tenemos slots básicamente como, como en un web components, dejas cierto marco o varios marcos en el, en el marcado del componente, y luego puedes insertar ciertos bloques en eso. Tenemos directivas, que es de nuevo, muy familiar para los usuarios de angular. Son básicamente atributos personalizados, que modifican el comportamiento de una, de una etiqueta. Tenemos plugins, es como una forma mucho más amplia aplicable, una forma de empaquetar cierta funcionalidad. Los plugins pueden tener sus propios componentes, directivas y cosas como esta. Así que si quieres escribir algo más grande que un componente o una directiva, probablemente necesites un plugin. Así que por ejemplo, el router de Vue, o Vuex son plugins al final. Y eso es como el trozo más grande que puedes usar, el concepto más grande que puedes querer usar si quieres crear piezas reutilizables de code y piezas de funcionalidad. También tenemos mixions en la versión dos. Los marqué como tachados porque en la versión tres, esto es algo que ya no va a ser soportado. Así que los mixions eran agradables, con ellos básicamente podrías añadir comportamiento a otros componentes añadiendo una propiedad especial de mixions. Sin embargo, ahora ya no confiamos en los mixions en la versión tres. Así que si todavía tienes mixions en tu V2 code, tendrás que reescribirlos en algún otro formato. Probablemente los hooks o los comportamientos serán la mejor solución para eso. Así que también veremos esto. Así que tenemos bastantes opciones diría yo, y sí, en la versión tres tendremos la API de composición que nos da la capacidad de usar los llamados hooks o comportamientos. Usaré esos términos indistintamente, porque sí, es una terminología que es en parte heredada de react-hooks. Así que sí, así es como lo haremos en nuestra actual masterclass. Un rápido repaso de lo que obtuvimos en la versión tres. Así que fue lanzado, sí hace casi un año en realidad. Creo que fue una de las conferencias de vista donde finalmente fue anunciado y trajo bastantes mejoras. Diría que además de una reescritura completa que dio más modularidad al code, incluyó varias características construidas por la comunidad como portales y otros elementos que fueron llevados al núcleo por lo que ahora está disponible sin usar ningún plugin separado. Sí, también agradables adiciones como plantillas de múltiples raíces cuando no necesitas envolver todos los elementos en un elemento raíz llamado fragmentos. Y el soporte de TypeScript se volvió increíblemente mejor. Si has estado usando Vue con TypeScript, Vue 2 con TypeScript probablemente sabes de lo que estoy hablando porque hay varias soluciones agradables sin embargo necesitas saber tu camino alrededor de él para hacer un uso adecuado de él. Así que ahora es mucho más sencillo y fácil. La mayoría de mis ejemplos serán en JavaScript, sin embargo, pero sí, tengo algunos enlaces en la parte adicional donde se muestran algunas demos de TypeScript. Y por supuesto el gran cambio de dominio es la API de composición que será el tema principal del día. Sí, actualmente ya es la versión 3.2 y también tenemos una compilación de migración, una herramienta especial que ayuda a migrar la base de code de la versión dos a la versión tres. Así que para aquellos que todavía están usando la versión dos y pensando en actualizar, hay un buen tutorial oficial documentación que explica cómo hacerlo. Haré una rápida explicación al respecto. Así que sí, también tendremos tiempo para esto.

Bien, así que ahora empecemos con el contenido real de la API de composición. Eso será, digamos, una parte teórica durante unos 20 minutos más o menos. Y luego nos sumergiremos en los ejemplos de code, ¿de acuerdo? Hasta ahora, si hay alguna pregunta, o digamos, cosas que necesitas aclarar, por favor, no dudes en usar el chat. También puedes usar la cosa de Preguntas y Respuestas. Pero sí, en las Preguntas y Respuestas, estamos seguros de que todas las preguntas están apiladas y visibles para mí. El chat es más para sugerencias o comentarios en curso, o tal vez si en algún momento me quedo atascado y sabes cuál es el problema, por favor, siéntete libre, ¿de acuerdo? Porque es bastante común para esas demos que después de una hora y media algo va mal y no puedes ver algún corchete o algo. Así que cuento con ustedes chicos aquí. ¿Bien? Así que vamos a saltar a la parte de composición. ¿Cuál es la idea principal de la API de composición? La idea es que creamos, estamos añadiendo una función especial en el nivel raíz del objeto que describe un componente esa función se llama setup. Y la función es un lugar donde puedes crear o instanciar piezas de code reutilizables que serán rastreadas de forma reactiva por el núcleo del framework. Y eso permitirá, vincular la lógica que luego puede ser usada en el uso, en las plantillas o en bloques heredados como métodos o un observador, por ejemplo. Así que veremos más adelante que puedes mover todo el manejo de la lógica de la versión dos a esta función de configuración, y lo que es genial de esta función de configuración es que nunca verás esto en ella. Esto significa la referencia a una instancia de un componente. Y eso hace que sea muy fácil extraerlo fuera del componente. Pero lo veremos mejor en las futuras diapositivas. Así que por ahora, sólo recuerda que tenemos una función de configuración que tiene toda la magia en ella, y necesita devolver todas las cosas que van a ser usadas en otras partes del componente, en las plantillas, especialmente fuera de ella. Si no devuelves, entonces esto no será visible o disponible en el... ¿Puedes ver el puntero ahora? Porque estaba usando una aplicación separada y probablemente ahora es mejor. Así que, genial. Así que, dos cosas para recordar de esta diapositiva, la función de configuración que acepta props como primer argumento y no olvides devolver cosas de la función de configuración porque si olvidas devolver, no puedes usarlas en ningún lugar. Eso es importante recordarlo.

Bien, hablando sobre el contenido de esta función de configuración, ¿qué podemos hacer realmente allí? Podemos hacer muchas cosas, es decir, construir cierta lógica que funcionará con nuestras variables, nuestros objetos. Y comenzaremos aquí con primitivas incorporadas, utilidades incorporadas para manejar esa lógica. Pero como veremos más adelante, también puedes crear tus propias, ya sabes, básicamente funciones y objetos que serán inherentemente reactivos y te ayudarán a aplicar tu modelo de datos o tu lógica a este enfoque reactivo.

Entonces aquí podemos ver que todos esos elementos como watcher o una computed deben usarse dentro de una función de configuración. Si los usas fuera, si los usas en un método o en un gancho del ciclo de vida, por ejemplo, no funcionará, porque solo está dentro de una función de configuración. Piensa en ello como algo así como utilidades que solo son visibles dentro del ámbito de una función de configuración, pero incluso si intentas hacerlo fuera, rápidamente verás la advertencia. Así que es un proceso de aprendizaje fácil, diría yo.

Veo una pregunta de Rainey preguntando sobre, ¿qué es una función de configuración? Entonces, la función de configuración es, lo siento, la función de configuración es básicamente el lugar donde el componente, el componente, es un método que se llama una vez, eso es importante saber solo una vez, cuando se inicializa el componente. Y ese método declara todos los internos, toda la lógica de este componente. Y a lo largo del ciclo de vida de nuestro componente, de ciclo de vida del componente, las variables y métodos que se declaran solo dentro de la función de configuración estarán disponibles si no olvidaste devolverlos. Como mencioné aquí, no olvides devolverlos. Eso puede ser molesto a veces cuando tienes muchos elementos, pero esa es la forma actual de hacerlo. Tienes que devolver todo. Así que creo que será más claro cuando veamos más durante la demostración, los ejemplos de lo que realmente puedes hacer. Así que por ahora, míralo más como una introducción teórica.

Y veo una pregunta en la Q&A. Dice, ¿es la función de configuración la forma recomendada de usar la API de composición? Y esa es una gran pregunta. Vamos a profundizar más en esto en el resumen, ¿de acuerdo? Pero gracias por la pregunta. Desafortunadamente, no se ve quién la hizo pero sí, veo otra pregunta de TFO. ¿Cuál de estas dos formas de crear data reactivos se sugiere? ¿Todo el estado del componente en un solo data reactivo o crear para cada objeto un data reactivo para los primitivos? Mejor trato de compartirlo de alguna manera porque es bastante largo. Déjame compartir la pantalla. Pongámoslo así. Entonces esa es la segunda pregunta. Intentaré mirar rápidamente esta. Entonces, ¿cuál de las dos formas, qué forma de crear data reactivos se sugiere? Ah, te refieres dentro de un solo componente. ¿Es un solo data reactivo para todo el estado del componente? Ah, te refieres dentro de un solo componente. ¿O para cada objeto un data reactivo para los primitivos? Ok. Entonces esto se puede responder fácilmente ahora. Recomendaría tener estructuras de data separadas para cada característica que tenga tu componente. Digamos que si tu componente trabaja con, no sé, usuarios y productos, entonces deberías crear estructuras de data separadas para cada uno de ellos y manejarlos por separado. ¿Por qué? Porque en el futuro, si quieres reutilizar parte de esta lógica, puedes extraerla de allí, ¿verdad? Es lo mismo que si tienes, digamos, algún módulo, un módulo JavaScript, lo que sea, PHP, Python, no importa el lenguaje. Entonces, mantener las cosas separadas puede ayudar a refactorizarlo más adelante. Yo abogaría por este enfoque. E incluso si no lo reutilizas, o no lo extraes en este momento, sigue siendo mucho más claro cuando el nombre del componente o de la estructura de data corresponde específicamente a una cierta lógica empresarial, ¿de acuerdo? Así que abogaría por la opción dos en tu pregunta, Tefla. Ah, no ves la pregunta. Ok. Pero ¿puedes ver la pregunta ahora? Si puedes, oh. Es, está bien, está bien. Es extraño. Solo copiaré para asegurarme. Ok. Así, creo que sí. Sí, solo un poco de trasteo. Lo siento por eso. Bien. Entonces sí, abogaría por el enfoque número dos. Bien. Entonces, lo que podemos ver aquí, solo recapitulemos rápidamente los bloques de construcción de la lógica reactiva. Podemos usar ref y reactive. Esas son utilidades que pueden ayudarte a crear una variable o un objeto reactivo. Bueno, la variable es para valores individuales. Puede ser un booleano, un número o una cadena, algo así. Reactive es, en primer lugar, para formas más complejas como objetos completos, matrices y cosas así. Y luego puedes hacer cosas con esas variables reactivas que se devuelven de esas utilidades. Por ejemplo, puedes observar el valor como aquí y si el valor cambia, entonces puedes hacer cierta lógica. O puedes crear, digamos, un siguiente nivel de elementos reactivos, derivados que se derivarán del valor del objeto inicialmente creado. Entonces tenemos el elemento de cuenta aquí, que tiene un valor predeterminado de cero. Y luego tenemos el elemento más uno aquí, que cada vez que cambia la cuenta, volverá a calcular el más uno y lo hará un valor de cuenta más uno, ¿verdad? Entonces, cuando la cuenta se convierte en dos, más uno se convierte en tres, cuando la cuenta se convierte en 29, se convierte en 20, 30 y así sucesivamente, ¿verdad? Y no solo tiene que lidiar con matemáticas o números. Puede ser cualquier tipo de transformación. Así que la idea de las propiedades computadas, es muy similar a la versión dos, ¿verdad? Que estás comprobando los elementos que se mencionan en el callback. Quiero decir, no los estás comprobando, pero Vue hace esto por nosotros, ¿verdad? Solo escribes declarativamente lo que quieres derivar y Vue rastreará todas las dependencias y lo recalculará por ti, ¿de acuerdo? Ese es el juego. Si estás usando la versión dos, sabes sobre las propiedades computadas, ¿verdad? Así que eso es muy similar a eso. Nuevamente, este ejemplo es bastante simple. Solo para darte una idea, intentaremos hacer cosas más complejas en la sesión de demostración. Lo que también es interesante aquí, puedes ver que nuevamente no hay referencia a esto, a la instancia del componente. Lo que creamos son algunas propiedades de estado como estos dos, como cuenta y estado, pero no decimos this.cuenta o this.estado. Así no es como debes hacerlo. Por lo tanto, no se utiliza this dentro de las funciones de configuración, ¿verdad? Y en segundo lugar, lo que puedes notar es que, en algunos lugares, usamos .value, y .value es un truco que en realidad se necesita para manejar adecuadamente el valor real. Mostraré rápidamente la siguiente diapositiva, que he construido específicamente con mis habilidades de Photoshop para explicarte qué está pasando.

Entonces, cuando tienes solo objetos o variables simples, la vista no los rastrea, ¿verdad? Simplemente no le importan. Cuando creas un objeto ref o reactivo, lo marcará de alguna manera y seguirá rastreándolo, observándolo cuidadosamente hasta que, si cambia. Y si cambia de alguna manera por la entrada del usuario o por tiempo de espera o lo que sea, entonces la vista, como un sistema de reactividad de framework, es notificado al respecto. Bajo el capó, utiliza los llamados proxies, que agregan una envoltura extra encima de tus objetos que quieres rastrear. Y luego cuando este objeto cambia, recibes una notificación de que, está bien, este objeto cambió. Si quieres hacer algo, por favor ve, este es el nuevo valor, ¿de acuerdo? Así que esa es la idea de por qué es importante hacerle saber a la vista que quieres usar cierto valor o un objeto como uno reactivo. Y luego cuando lo has hecho, cuando lo has declarado en la función de configuración, entonces estás dorado, entonces hará cualquier tipo de recálculos por ti. Pero es por eso que esa parte viene con, lo siento, ¿dónde está mi puntero del ratón? Así que es por eso que este punto valor entra en juego. Esto se debe a que el resultado de esta creación de objeto reactivo es un objeto, no es un valor simple individual. Es por eso que para entrar en él, para obtener el valor real, tienes que llamar a punto valor. Por eso tiene que ser así.

Bien, entonces eso en realidad no es un comportamiento nuevo en comparación con View2. En View2 también tenemos un elemento llamado observable, como un método estático que puede hacer cosas similares. Entonces puedes simplemente llamar, puedes llamar a view.observable y luego poner algún objeto o variable allí. Y luego le dirá a framework que por favor rastree el sitio y luego me notifique si algo cambia. Así que eso ya estaba de alguna manera haciendo su camino en la API, pero no era mainstream en la versión dos, ¿de acuerdo?

Sí, entonces veo una pregunta para, de Martin, y era sobre la diferencia entre el Efecto de Observación y su diferencia de watch. Sí, vamos a mirar más de cerca este, pero en resumen, esto es lo mismo que un watch normal, pero con el flush colocado en una opción de sincronización. Así que básicamente significa que cuando estamos actualizando variables en comparación con el ciclo de redibujo del DOOM virtual, eso es todo. Así que tu sistema de actividad de vista, invalida los efectos, esos cambios, y luego los flushes de forma asincrónica para evitar duplicados necesarios de callbacks. Y entonces cuando tienes múltiples cambios sucediendo al mismo tiempo, digamos, tick en la misma actualización, y por eso hay diferentes etapas de este proceso. Y puedes manipular en qué estado de este proceso quieres ejecutar este efecto. Bien, entonces eso es, digamos un poco in depth, pero para muchas cosas básicas, watch estará bien, pero para el efecto de observación tienes una opción extra cuando quieras hacer eso, ¿de acuerdo?

Bien, entonces sí, esa es una pregunta más sobre esto fue por Robert, sobre el ref versus reactivo. Esa es una pregunta muy, muy popular. De hecho, tenemos dos formas de crear elementos. Sin embargo, para el uso común es que tú use ref para data primitiva, como dije, como números, símbolos, booleanos, cadenas y así sucesivamente, y reactivo, puedes hacer uso de él cuando estás tratando con todo un conjunto de objetos, ¿de acuerdo? Así que reactivo, no podrá tomar un valor primitivo como entrada. Así que puedes poner un objeto aquí, pero no puedes poner un valor primitivo aquí. Y se usa comúnmente de esta manera, que usarás refs para primitivas y reactivo para objetos más advanced. En resumen, también veremos, quiero decir, de nuevo, más ejemplos, pero eso es porque también dentro de reactivo, el objeto que estás pasando, no solo puedes declarar propiedades individuales, también puedes poner, por ejemplo, propiedades calculadas dentro de él y hacerlo realmente más complejo. Por eso son, eso, diría que es la principal diferencia. Así que vamos a seguir adelante.

Sí, quiero decir, sí, puedes hacer eso, sí. Sí, cierto, cierto. Buen punto, todos heredamos de un objeto al final. Entonces todavía puedes poner eso, sí, claro. Bien, sigamos adelante.

Entonces, la siguiente parte de la lógica que puede residir en la función de configuración son los ganchos de ciclo de vida. Todos sabemos qué es un ciclo de vida de un componente, ¿verdad? Los componentes se crean, se renderizan, luego ciertas propiedades pueden o no ser actualizadas y luego un componente puede ser desmontado, eliminado del DOM. Y durante este ciclo de vida, tendremos un conjunto útil de callbacks que podemos emplear para ejecutar cierta lógica como iniciar alguna biblioteca de terceros o iniciar alguna carga de data o, sí, rastrear ciertos valores, cosas así, o tal vez iniciar un contador y todas esas cosas. Y anteriormente solíamos tener los ganchos de ciclo de vida en el nivel superior de la API del componente para la API de opciones del componente. Entonces usarías como un montado, por ejemplo para llamar a la lógica que se ejecutará cuando el componente esté montado y cosas así o destruido cuando quieras, tal vez antes de destruir, cuando quieras cerrar algo, no sé, conexión de web socket o eliminar algunos oyentes de eventos y cosas así. Quiero decir, oyentes de eventos que están fuera del control de vista si tienes alguno, por ejemplo, ¿verdad? Entonces esos ganchos de ciclo de vida todavía existen y están disponibles dentro de la función de configuración. Hay callbacks desmontados, no actualizados y desmontados que puedes importar de un framework, de vista y luego hacer uso de ellos dentro de una función de configuración, ¿verdad? Entonces ese es un breve ejemplo que muestra la solución típica cuando quieres cargar data cuando el componente está abierto, co-llamando a algunas APIs y luego cuando los data están cargados, simplemente lo asignas a tu variable de estado. En este caso, es un objeto reactivo y luego devuelves de una función de configuración, el objeto de estado y el objeto de estado puedes usarlo para mostrar cosas dentro de tu plantilla, ¿verdad? Entonces ese es un ejemplo simplificado de cómo puedes lidiar con la carga de data asíncrona dentro de un componente de Vue 3. Y por supuesto, de nuevo, ves que no hay nada específico para este componente que nos impida reutilizar este code fuera de este componente, que es la parte agradable de esto que podemos juntar todo esto en un gancho personalizado llamado o un comportamiento. Y esto puede ser importante en cualquier otro componente donde necesitamos esta carga de data.

De acuerdo. Y sí, aquí solo tengo algunos elementos que cambiaron en la versión 3. La nomenclatura fue cambiada. Creo que es realmente genial que ahora la nomenclatura esté más alineada. Simplemente comienza con el 'on' y luego va la nomenclatura kebab case para cada uno de los eventos. Y esto, creo, lo hace bastante más fácil de recordar y usar cuando tiene una nomenclatura similar. De acuerdo. Un elemento más. Así que, solo mencioné brevemente que el primer argumento es propiedad. Las propiedades son una forma común en todos los modernos frameworks y también para los incorporados como web components, las API's para propagar data desde un componente padre a un componente hijo. Así que las propiedades van como primer argumento y todas las demás características que Vue proporciona para nuestros componentos, como emitir un evento, leer atributos, tener acceso a slots, todo esto va en un segundo argumento, a menudo se llama contexto. Así que si necesitas emitir un evento necesitas obtener el segundo argumento de distracción y obtener la función de evento de él. Así que eso es un poco de descomposición de lo que va en el segundo argumento. No vamos a tratar mucho con él, pero si necesitas encontrar algo especial puedes encontrarlo aquí en el argumento de contexto.

De acuerdo, entonces veamos este ejemplo realmente simple que muestra una aplicación que solo tiene un formulario y un poco de lógica para aumentar el valor de este formulario y un pequeño método solo para mostrar la data que es para el método. Así que aquí vemos todas las piezas de la API de opciones comúnmente utilizadas como el estado se almacena en el objeto data inicialmente, los valores formateados se almacenan en las propiedades calculadas. Podrías decir que podríamos usar filtros por ejemplo para estos. Los filtros también van a ser deprecados en la versión tres así que eso es algo de lo que hay que estar consciente. Tendrás ganchos de ciclo de vida. Tenemos métodos para hacer este cambio de valor, solo incrementar. Y tenemos un observador, no hace mucho aquí pero solo por el hecho de tenerlo. Y aquí está un ejemplo de cómo realmente reescribimos el mismo code en la versión tres. Entonces, ¿qué va a dónde, verdad? Eso es solo para compararlos lado a lado porque en las demostraciones de code no estaré usando la versión dos más. Así que solo un rápido repaso, ¿cuáles son los bloques de construcción y cómo se corresponden uno con otro. Así que, la declaración de estado va en un rev o reactivo, ¿verdad? Ponemos los valores predeterminados aquí y hacemos uso de los objetos reactivos que nos devuelven. Las variables reactivas derivadas como para el formateo se crean a través de funciones calculadas. Así que la función calculada acepta un callback y los elementos que mencioné en el callback son rastreados. Y para cada uno de los cambios de esos elementos que están en el callback, el nuevo valor será calculado o computado, por eso se llama calculado, ¿verdad? El gancho all-mounted que mencioné justo antes de esa diapositiva sobre los ganchos del ciclo de vida. Así que aquí puedes ver cómo funciona. Luego los métodos. Los métodos no necesitan ninguna declaración de propiedad especial como aquí, son solo funciones que hacen cosas, ¿sabes? Y esas funciones necesitas devolverlas y entonces podrás hacer... Será posible para ti usar esta función en tu plantilla. Y el último es para el observador, y aquí, de nuevo, no hace mucho, solo console registra el valor, pero así es como puedes hacer uso de un observador, pones una dependencia y luego obtienes un valor previo y el nuevo valor en el callback. Eso de nuevo, es muy similar al enfoque de AngularJS, probablemente reconoces ese patrón. De acuerdo, eso es para la comparación lado a lado. Pasemos a elementos más específicos. Andrey escribió, en la opción de script de configuración, no usas return, ¿es eso cierto? Entonces, solo para tocar rápidamente este punto, porque también hubo una pregunta relacionada con el script de configuración. Entonces, un script de configuración es algo como puedes escribir así solo si no lo has usado, es como esto, que es solo una especie de azúcar sintáctico para componentes de archivo único. Y luego puedes usarlo junto con una declaración normal y básicamente agrega un poco más, sí. Sí. Cómo decir, sintaxis comprimida, menos ruido de todos esos return export como export default y cosas así. Correcto. Y puedes usar mejor TypeScript para declarar propiedades y eventos. Y al final, en realidad tiene un ligero rendimiento en tiempo de ejecución. Así que esa es una buena tooling para usar. Esa es una buena manera de usar. Y de hecho en el script de configuración, puedes saltarte el return porque todos los elementos están en cierto modo en el alcance global de esta gran función de configuración, ¿verdad? Así que eso es, sí, básicamente un buen azúcar sintáctico para esos tipos de casos. Sí, genial. Veo que se agregaron algunas preguntas más. Déjame ver. Así que el primer elemento, si no lo estoy pronunciando correctamente. ¿Cómo se definirían las props en la nueva API de composición? Así que en este ejemplo, no se definen props porque esto es solo una simplificación. Pero normalmente puedes poner props como un argumento para una función de configuración y tomas los valores de allí. Así que estarán disponibles para ti porque la función de configuración se ejecuta antes de que se renderice el componente pero ya cuando la vista tiene acceso al valor de las propiedades. De acuerdo. Entonces, y si necesitas configurar algo en tu componente usando props puedes leerlo desde el primer argumento. Eso es lo que estaba mostrando justo aquí. Así que las props están aquí y luego puedes hacer uso de ellas, lo que quieras. De acuerdo. Genial. Sí. Correcto. Lo que devuelves de una función de paso puedes usarlo en la plantilla. Sí. Y una pregunta más. Tratando de usar esta característica como respuesta en vivo, pero siempre me olvido de ello, lo siento. Entonces, está bien, estoy tratando de hacerlo ahora. Estoy respondiendo la pregunta de Aaron.

¿No necesitas el sync en los aros del ciclo de vida? ¿No necesitas el sync? Sí, ¿te refieres a ese ejemplo específico? Tienes razón. Estás completamente en lo cierto aquí. Es mi fallo, está aquí de hecho. Tengo un sync, aquí lo olvidé. Sí, de todos modos fue bastante simplificación. Así que me perdí el sync aquí, por supuesto. De lo contrario no funcionará. Correcto.

Bien, uno más. Creo que ya respondí a este. Dame un momento. Este para WEF y Reactive, de nuevo, hay un buen artículo para comparar. Estoy bastante seguro de que esto puede dar una mejor explicación de la que daré durante esta masterclass. Así que por favor, echa un vistazo a esos. Pegué un par de enlaces en la respuesta. Y una pregunta más de Luka. ¿Necesitas usar value si quieres hacer un cambio inmutable, es decir, si tienes un array reactivo, no necesitas usar full value, full value concat blah, blah, blah, ¿o es preferible el enfoque mutable? Vale. ¿Necesitas usar value para el array? Bueno, si tienes cosas que están definidas por ref, entonces tendrás que usar value para acceder a ellas, ¿vale? Eso es seguro. Si quieres cambiar el valor, también tendrás que usar el dot value. Así que mi entendimiento, la primera versión debería ser correcta, pero vamos a comprobarlo cuando tenga el IDE abierto. Estoy bastante seguro de que es así, la primera que escribiste, porque necesitas acceder al valor. Vale, bien.

Gracias por muchas, muchas preguntas, realmente agradables. Hice esta masterclass creo que en algún lugar, en junio en, ¿fue creo, la Conferencia de Amsterdam Vue o algún otro evento? Y había mucha menos gente que ya conocía o experimentó o usó Vue 3, así que había muchas menos preguntas. Así que estoy realmente contento de que esté sucediendo y las preguntas son bastante en profundidad. Eso significa que nosotros, como comunidad, nos estamos acercando a la etapa en la que usamos Vue 3 como predeterminado, así que eso es realmente genial. Una más de Adriana, lo siento. Responder en vivo, he oído que la API de Composición puede ser utilizada como una alternativa para Vuex. Sí, eso es en realidad también una buena adición. Es algo similar, bueno no exactamente, es como en React cuando se introdujeron los hooks, podrías hacer uso de estructuras similares como en lugar de Redux, se llamaba Use Reducer, como un hook especial que podría crearte un pequeño Redux específicamente para tu componente. Eso es algo similar aquí, al usar esas utilidades reactivas como estaba mostrando ahora en esta parte teórica, podemos construir nuestros propios objetos que vivirán en algún lugar fuera de nuestro componente, serán piezas separadas, enchufables que puedes activar en los componentes donde las necesites. Y de hecho, almacenarán el valor. Así que se usarán, pueden ser usados como una pieza de estado de libros. Así que sí, es algo cierto. Y también creo que hay algún artículo que muestra bastante bien eso, puede que tenga dificultades para encontrarlo, pero en resumen, sí. Y mostraré un ejemplo de esto, ¿vale? Bien. Intentaré recordar esas preguntas cuando muestre los ejemplos de código, pero puede que olvide algunas de ellas. Las tengo en la pestaña de respuesta. Lo siento chicos, a veces la interfaz de usuario de Zoom se vuelve cada vez más compleja, así que hay cada vez más características allí, genial. Andrei, una pregunta más. Lo siento, tal vez tengamos grabación. Eso es algo que deberían saber los organizadores. Supongo que se está grabando. Y sí, se está grabando. Y de alguna manera, como después, debería estar disponible en algún lugar de esto, sí, ¿cómo lo llamas? Área de inicio de sesión para las personas que tienen una entrada. Así que sí, deberías ser casi 100% capaz de encontrarlo. Genial. Solo algunos últimos comentarios. Es Karolin, y llegaremos al ejemplo de código, seguramente. Así que como resumen, de nuevo, puedes extraer la lógica como aquí en tu función de configuración, y luego hacerla no solo un gran montón de código, como una super función, ya sabes, como la que toma como tres pantallas para leer y hace todo y esto es difícil de mantener. Puedes extraer cosas en comportamientos llamados o ganchos, y luego importarlos pieza por pieza. Así que aquí, es un ejemplo, por ejemplo, tenemos algunos componentes y tienes ganchos o composables. Y luego donde necesites cierta pieza, puedes importarla y hacer uso de ella. Así que imagina que básicamente haces todo lo que está escrito aquí en la función de configuración. Solo un gancho y luego puedes importar este gancho así en tu componente y entonces es solo una línea que te da todas las variables, todos los métodos que puedes querer usar y cosas así. Así que ese es el patrón corto. Sí, en cuanto a la grabación, sí, supongo que en algún lugar entre mañana y la semana. Eso es seguro. Genial, solo una rápida comparación contra los Hooks de React porque los Hooks de React son una herramienta bastante popular como todos sabemos y tal vez personas que están cambiando de React o también están usando React, así que tal vez sea útil resaltar rápidamente las diferencias. No estamos usando el mágico this en el código del componente, como los Hooks de React dieron una oportunidad de no tener este estado, lo siento, propiedades de clase y más métodos con estos. Así que es el mismo tipo de cosa. No estás vinculando la lógica a las piezas del componente. Es solo una lógica separada que vive en la función de configuración. Luego tenemos, está en paralelo con toda la API. Así que también es lo mismo con React cuando todavía puedes usar componentes de clase y componentes funcionales con hooks, puedes combinarlos como quieras. Así que eso funciona en paralelo también. Extraemos la lógica con estado. Eso es lo que estaba tratando de mostrar antes, que las cosas que contienen ciertos valores como los que están definidos por un ref y tal vez los que están definidos por un computed. Esto se llama lógica con estado en este caso, ¿verdad? La lógica que tiene valores que necesita almacenar y necesita reutilizar en las próximas iteraciones, ¿verdad? Así que tiene estado básicamente. Y esta lógica con estado va fuera del componente.

Probablemente ya lo haya mencionado un par de veces, pero no puedo enfatizar este punto lo suficiente. Es un patrón que ayuda a reutilizar la lógica de manera más elegante. Digamos, está bien. Y sí, la convención de nomenclatura bastante común es tener un prefijo de uso que también se usa mucho en el mundo de Vue. ¿De acuerdo? Solo el exterior de este tipo de lo que no es similar a los hooks de React es que la función de configuración en todo solo se llama una vez. Como mencioné anteriormente, cuando se inicializa el componente, ¿verdad? No es como volver a ejecutar todo el componente como una función como lo hace en el espacio de React. Simplemente se ejecuta una vez para declarar detener. Y gracias a eso, no hay limitaciones. Si has trabajado con hooks de React, hay cosas como que no puedes poner hooks de React dentro de bucles o declaraciones if-else, entonces se rompe. Pero aquí todo está bien porque solo se ejecuta una vez en la inicialización, ¿de acuerdo? Así que sí, eso es en resumen. No más React. Solo una última diapositiva. Aquí estamos comparando un componente simple que incrementa el valor y calcula el valor duplicado de este elemento. A la izquierda, tenemos una versión de React y a la derecha, tenemos una versión de Vue. Puedes ver que algunas partes son similares, lo que significa que toda la lógica, nuevamente, no contiene ninguna conexión con esta, la instancia de un componente y utiliza utilidades que se importan de la biblioteca, que recuerda la forma en que se hace desde Vue. Eso es en realidad todo el ejemplo. Utiliza la API de composición en lugar de la versión moderna de Vue 3. Entonces, esto es para los usuarios de la versión dos. Si no estás usando la versión tres, en la versión tres puedes importarlo directamente desde el núcleo de Vue. De todos modos, importas esas utilidades, creas un estado y con esas utilidades haces ciertas modificaciones, y luego muestras cosas en la plantilla. Así que, en realidad, aquí tienes un ejemplo de un objeto reactivo que mencioné anteriormente que no solo puedes poner solo como, digamos, valores primitivos, sino que también puedes poner objetos anidados o puedes poner propiedades calculadas dentro de un objeto reactivo. Eso no funcionaría con el Ref, ¿de acuerdo? Entonces, eso es más avanzado en términos de seguimiento. Sí, buena observación, Andrei. Entonces, dos Refs básicamente desempaquetan el contenido del objeto, ¿de acuerdo? Así que abre un objeto y proporciona cada una de sus propiedades como una variable reactiva separada, ¿de acuerdo? Entonces aquí tenemos un State, que está dentro de count y double. Y cuando usamos dos Refs, obtendremos count y double por separado, ¿de acuerdo? Entonces, eso es un atajo rápido para este tipo de operaciones. De lo contrario, podrías hacerlo manualmente, ¿verdad? Pero serían más líneas en la declaración de retorno. Así que tenemos dos utilidades de Ref para esto. De acuerdo, eso es un ejemplo rápido. Ahora veamos cómo usar los patrones de la API de Composición en las Bibliotecas Principales. Con Bibliotecas Principales, me refiero a Vuex, en primer lugar, un enrutador y un par de cosas más. Nuevamente, veremos más de esto en los ejemplos de código. Solo estoy haciendo un repaso teórico rápido de cómo funciona esto. Tanto el enrutador de Vue como Vuex vienen en una versión más nueva. Entonces, si estás usando la versión tres de Vue, debes usar la versión cuatro del enrutador de Vue y Vuex. Eso es como un conjunto en la dependencia entre pares. Entonces, si estás instalando la versión tres de Vue y luego estás instalando un enrutador, automáticamente pondrá la versión correcta. Lo mismo con Vuex, pero asegúrate de no intentar instalar la versión antigua porque la versión antigua no tiene hooks, esos hooks personalizados importantes, por lo que no funcionará. Pero en las versiones modernas, las últimas versiones principales, puedes importar un hook especial. Nuevamente, mira la forma en que se escribe la sintaxis, es un use y luego el store, así que usa algo. Y en la función de configuración, nuevamente, puedes obtener un store de él y hacer cosas similares como lo harías normalmente con el store, como leer el valor o escribir un valor, llamar a acciones y mutaciones, eso es posible, así que ese es un patrón rápido de cómo se hace en la versión 3, ¿de acuerdo? Espero que eso dé alguna idea. Enlazamos valores de un estado en la función de cálculo y lo que sucede es que Vue Core realiza un seguimiento de estas dependencias dentro de tu store y cualquier cambio que realice, la función de cálculo se volverá a ejecutar y te dará el nuevo valor de un store, así es como lo lees. Y si quieres confirmar, solo este objeto de store que obtienes del hook tiene opciones para confirmar y despachar, básicamente para hacer acciones y mutaciones con los datos que necesitas. Así que eso es en resumen cómo lo haces con Vuex. Clement, veo tu nota. Honestamente, no lo he intentado. Copiaré esto y lo intentaremos, ¿de acuerdo? No lo sé, quiero decir, tal vez lo intenté, pero no tengo una respuesta en este momento, podemos echar un vistazo. Copié tu comentario, lo intentaremos más tarde. Sí, sí, me gusta comprobarlo. Mi opinión es que no debería porque ref no realiza un seguimiento de sus dependencias. Entonces, computed es específicamente como en la versión dos, computed es una función donde Vue identifica todas las variables mencionadas y luego realiza un seguimiento de sus cambios. Así que creo que aquí no debería funcionar, pero lo intentaremos. Bien, y uno más para el enrutador, lo mismo, puedes importar hooks especiales desde una versión moderna del enrutador. Y esos hooks te brindan el mismo comportamiento que usarías con el buen y viejo, este enrutador de dólares, ¿verdad? Puedes obtener tu ruta actual. Puedes obtener los parámetros. Puedes hacer navegación programática, cosas así. Solo puedes hacer uso de esos objetos que se devuelven de los hooks. Y nuevamente, son completamente componibles con otros bloques de construcción que acabamos de describir en la fase introductoria. Por ejemplo, puedes rastrear los parámetros de una ruta y si cambia, puedes volver a ejecutar cierta lógica para obtener un nuevo dato, ¿verdad? Así es como esas piezas juegan juntas. Y nuevamente, veremos más de eso en los ejemplos, ¿de acuerdo? Entonces, sí, eso es Willa Martin. Vi tu mensaje de advertencia. Sí, creo que es más importante que ahora nos sumerjamos en los ejemplos y luego los mostraré allí, sí. Supongo que es, creo que es bastante material para revisar allí. Y un elemento más que realmente me gusta como desarrollador, como usuario, es una biblioteca llamada VueUse. Es básicamente una colección de todo tipo de hooks, todo tipo de comportamientos pequeños, y eso te brinda acceso a todo tipo de utilidades, no solo tiempos de espera y como limitaciones, sino también cosas relacionadas con la API del navegador, cosas relacionadas con la API del DOM, rastrear la posición de un mouse o rastrear un campo que está enfocado, cosas así. Entonces, creo que tiene como cien hooks diferentes que son realmente pequeñas piezas que se pueden insertar en el componente y hacer que sean como esas piezas de lógica que puedas necesitar una o dos veces en tu aplicación, pero luego no las escribes tú mismo o buscas en Stack Overflow, solo las tomas de la biblioteca, ¿de acuerdo? Sí, sí, estoy completamente de acuerdo. De hecho, hubo, creo que tres o cuatro bibliotecas que intentaron este enfoque, como en el ecosistema de React también había ciertas colecciones de esos hooks, esas piezas que puedes instalar como un módulo de NPM y luego usar, pero creo que VueUse ahora es la que domina y tiene las actualizaciones más frecuentes y la calificación más alta en estrellas, así que sí, actualmente es la que debes elegir. Sí, de hecho, también tengo una demostración con eso que te mostraré. Genial, así que hay una pregunta más de Tefo sobre Vuex, supongo, preguntándome, no más map getters en esta versión, así que todavía existe map getters, pero es posible que ya no lo necesites. Déjame, entonces, aún puedes hacer eso.

Estoy intentando abrir la parte específica. Todavía puedes tener un mapeo de acciones y mutaciones, creo. Sí, todavía existe, pero no siempre es necesario, ¿de acuerdo? Puede que estés bien solo con eso, ¿de acuerdo? Porque puedo imaginar que si tienes demasiados elementos para leer, ¿por qué no aprovechar esas cosas, ¿de acuerdo? Aquí, solo un enlace a la documentación. Entonces, el mapeo de mutaciones y getters y cosas así todavía existen.

De acuerdo, algunas bibliotecas interesantes para recomendar. ¿Y qué hace? ¿Es algo así como un reselect para React? Puedes encontrar datos específicos en tu Vuex. ¿Esos datos o, juzgando por el nombre, qué? Si tenemos tiempo, exploraremos qué es el DSL, ¿de acuerdo? Lo principal, genial, genial. Pero es genial que ustedes tengan algunas cosas de código abierto para compartir. Creo que siempre es bienvenido en eventos como este. Sí, si no es mucho, pero gracias por compartir los datos de todos modos. Genial.

Otra pregunta de Ricardo. Preguntas de Ricardo, ¿qué elegirías, el antiguo enfoque de Vuex o el nuevo enfoque de Composables para gestionar el estado entre los componentes? Sí, es un poco demasiada poca entrada de datos porque pones, es difícil decir una respuesta genérica. Mi opinión al respecto es que Vuex sigue siendo una buena opción para aplicaciones complejas porque Vuex es una, digamos, estándar bien conocido de cómo estructurar la lógica. Y se usa fácilmente, digamos, cuando pruebas tus componentes, ¿verdad? Solo tienes que poner un estado simulado y verificar que los componentes se comporten correctamente, ¿verdad? Con los hooks, no obtendrás eso. Así que, por supuesto, aún puedes probar los hooks y asegurarte de que el comportamiento sea similar, pero con Vuex, toda la infraestructura está ahí. Así que diría que si tu aplicación es lo suficientemente grande, confiaría en Vuex, pero es un hecho que también puedes hacer uso de Vuex junto con los componentes. Veremos eso en un momento. Puedes llevar esta lógica de Vuex, lo siento, los accesores de Vuex a tus hooks. Aún funciona, ¿de acuerdo? Eso puede ser un poco inesperado, pero aún funciona. Así que puedes acceder a ciertas partes de tu estado en tu hook y luego devolver solo esa parte. No son uno u otro. Son más como menos conectados entre sí. Así que puedes elegir uno u otro, o ambos, diría yo. De acuerdo. Finalmente, pasemos a la demostración. Solo un aviso rápido. Tengo este enlace a estas diapositivas, estas diapositivas las puedes obtener casi ahora. Pondré rápidamente una copia en el chat. Aquí están las diapositivas. Es un PDF, y la demostración, los fragmentos de código que estaba usando, estaré usando, lo estaré usando, lo siento, están en este repositorio. Básicamente tiene dos partes. Tiene ejemplos, oh, vamos a abrirlo, así que tiene básicamente dos partes. Tiene los ejemplos. Puedo hacer clic en él. Solo es un subárbol. Está bien, porque creé un informe separado en esta carpeta, ahora solo se está referenciando a un proyecto separado. Lo confirmaré rápidamente para que la carpeta de ejemplos también esté llena de contenido. De acuerdo. Solo estaba finalizándolo hoy. Algunas cosas, me olvidé. Genial. Otra pregunta de Dave, diciendo que ha escuchado que algunos desarrolladores de React están descubriendo después de usar hooks durante un par de años que no son una bala mágica, como pensaban que serían. Como los Composables todavía son bastante nuevos en Vue, ¿cuál es la sensación en Vue, ha pasado suficiente tiempo? Bueno, en primer lugar, no soy un usuario diario experto en React. Sí, tengo proyectos que usan React y más o menos me las arreglo. Pero no me consideraría una persona que realmente puede comparar todos los detalles y los pros y los contras de usar hooks en React. Así que sí, para mí, la lógica basada en clases sigue siendo mucho más legible.

Sin embargo, para casos típicos, simplemente recuerdo cómo se debe hacer. Pero si estuviera escribiendo algo complejo, probablemente tendría algunos problemas con los hooks. En términos de vista, de hecho, fue, digamos, dos años tarde o tal vez, sí, como un año y medio más tarde, introducido en View, un concepto similar. Como intenté mostrar en esta comparación, este enfoque con piezas funcionales reutilizables que son utilidades funcionales que hacen uso de code patterns reactivos. Pero aquí creo que la tasa de adopción todavía no es, digamos, tan grande. Y de nuevo, juzgando por esta masterclass que estaba dando, creo que desde principios de año, la adopción está creciendo. Definitivamente solo por esta parte introductoria en el chat que tuvimos al principio, se puede ver mucho más a menudo la versión dos mencionada. Oh, lo siento, se menciona la versión tres mucho, mucho más a menudo, pero todavía no es más de la mitad, diría yo. Y también cuanto más grande es el proyecto, generalmente ahí es donde reside la complejidad y donde pueden residir los casos difíciles, los casos extremos. Y ahí es donde puedes ver las desventajas de usar ciertos patterns que el framework impone. Entonces sí, creo que aún no es el momento de ver esas trampas, pero definitivamente habrá algunas mejoras o tal vez como con cualquier otro enfoque, como la community generalmente evoluciona para encontrar algunas soluciones utilizables sobre las cosas que no funcionan completamente. Ya saben, chicos, vamos, hace como seis, siete años no teníamos clases, ¿verdad? Estaba bien, la gente podía vivir sin ello, teníamos todas esas construcciones, un poco personalizadas en cada proyecto y la gente seguía escribiendo el code, ¿verdad? Ahora tenemos una sintaxis bastante moderna y comprensible en el lenguaje, así que ahora solo estamos hablando sobre las piezas específicas en algún lugar, digamos a nivel de las bibliotecas. Pero sí, miren lo lejos que estamos de lo que era antes de ES6, ¿verdad? Son mejoras sobre una sintaxis ya bastante bien trabajada y code outs. Entonces, debería estar bien, creo.

Bueno, por cierto, creo que ya no hay más parte de preguntas y respuestas, pero realmente, realmente fascinado por la cantidad de preguntas. Feliz por ellas, espero haber podido responderlas con algún contenido útil, al menos tal vez algunos enlaces o algunos elementos mencionados, puedes buscar más información en Google y formarte una opinión sobre ciertos aspectos. Pero pasemos a la parte de codificación.

¿Qué tenemos aquí, esto es diferente. Y tenemos, así que esto es... Vale. Avísame si el tamaño de la fuente es suficientemente grande, si es legible o no. Si es demasiado pequeño, pon algo. Vale, gracias, Relly. Um, solo una pregunta más de Bess. Podría ser útil para algunos para nuestro proyecto de Vue, Apollo client cache, GraphQL ha completado. Sí, un buen punto, Best, por cierto, porque eso es algo que ocurre bastante a menudo, también sucede para también el ecosistema de react. Hasta donde sé, el cliente de Apollo aporta todo tipo de partes para no solo consultar data, sino también para almacenar en caché la data y para agregar ciertos cómo lo llaman, como piezas de nivel de cliente de data que se derivan de la data existente y cosas como esta y reutilizables. Esos componentes que hacen la consulta y todo eso. Y es como si se hiciera cargo de una gran parte de la gestión de data que la gestión de data centralizada en las aplicaciones de Vue, lo mismo que para React. Sí, también he oído hablar de ello, sí. Así que es posible que quieras pensar qué al final quieres usar para tu... Solo si estás usando GraphQL, ese es el punto. Porque el Cliente de Apollo es específicamente, estoy hablando del GraphQL aquí. Genial.

Sí, así que aquí tengo solo un proyecto fresco generado por Vue CLI que actualmente tiene la versión tres de Vue. Y como mencioné, es una versión mayor que la VueX y las versiones del router que usaremos en él. Tiene todo eso, es bastante estándar. Y también ya instalé un VueUserCore para mostrar algunos de los elementos. Lo que también hice, puse solo algo de Bootstrap CSS para que se vea un poco más bonito. Y tengo un pie de página aquí solo para demostrar algunas de las características. Y no se hicieron más modificaciones. Vale, veamos qué tenemos. Creo que puedo empezar con, simplemente empezando el proyecto, tan simple como eso. Solo dos avisos rápidos. ¿Se siente todo el mundo cómodo usando Vue-CLI? Porque creo que ese es el, digamos, el sótano para el desarrollo productivo de Vue. También es parte de estas herramientas centrales que forman el ecosistema y creo que saber cómo usarlo. Y es importante para realmente ahorrarte mucho tiempo en la configuración. Así que si hubiera algún, digamos, que nunca lo ha usado, si tienes algunos comentarios más sobre ello, puedo mostrar rápidamente, pero espero que ya sepas cómo usarlo. Genial. No se menciona nada especial, eso es bueno. Así que tengo, tengo una aplicación de demostración del sistema, en la que solo reemplacé todos estos enlaces con algo de texto para que parezca un poco más personalizado y realmente que he preparado algo. Así que empecemos con algunos de los ejemplos, déjame comprobar esto rápidamente. Oh sí, está aquí. Así que simplemente volvamos a empezar con un ejemplo simple como suele suceder que escribimos alguna lógica con estado, algún elemento que almacenará la data en el Vuex. Quizás primero en el componente y luego en Vuex y luego pasamos a cosas más complejas. Así que simplemente empezaré con un componente que estará usando un contador. Por supuesto, empecemos con el ejemplo más simple pero simplemente mostrará la idea de qué partes necesitan ser implementadas para usar la tienda en una biblioteca moderna de Vue, vale. Proyecto moderno de Vue 3. Pero no pienses que solo estaremos hablando del contador, es solo para añadir algo de code. Muy bien. Entonces, antes de empezar a añadir el code, algunos elementos adicionales. Cómo la Vue API de inicialización cambió en la versión tres. Como antes solíamos tener la versión code NuVue, ¿verdad? Y luego pones el elemento y luego la función de renderizado y cosas así. Así es como se hacía en la versión dos. Aquí puedes ver que ya está usando la sintaxis de la versión tres y utiliza esta sintaxis de crear aplicación. Y creo que es realmente agradable, y no solo porque tiene ciertas mejoras en términos de separar los diferentes conceptos de diferentes diferentes instancias de Vue. Porque anteriormente, con esta sintaxis, no era posible separar la funcionalidad que estás usando. Que estás añadiendo a diferentes instancias de Vue porque era si estás añadiendo un componente personalizado o un plugin, entonces era añadido a todas las instancias en el alcance. Sin embargo, con esta nueva lógica, cada aplicación será tener su propio su propia lista de elementos, su propia lista de cosas que son que se añaden a ella. Así que puedes tener una aplicación aquí, la segunda aplicación aquí. Y por ejemplo, si la segunda aplicación no necesita un router, entonces lo hará así, y los paquetes resultantes serán, no contendrán el router en ambos. Así que esta sintaxis no permitía esto, pero es una buena mejora. De hecho, hay un artículo que lo explica con más detalle en el sitio web de la Escuela Vue, así que puedes echar un vistazo a más explicaciones. Pero sin embargo, esta sintaxis de creación, así que empezando con la palabra crear, y luego hacer algo es común también para otras herramientas dentro de Vue, Vue 3 ecosystem. Así que si miras la inicialización de la tienda, también usa crear tienda en lugar de nueva tienda. Y para el router, hace lo mismo como crear router, este patrón común creo que también es agradable una especie de unificación de cómo se llaman ciertas cosas. Y es quizás también algo en lo que puedes pensar si estás escribiendo tus propias partes personalizadas, tal vez plugins o algo, también puedes hacer uso de las mismas convenciones de nombres, ¿verdad? para crear una función de inicialización con un nombre similar, ¿verdad? solo para que todo el mundo entienda, vale, este es el punto de entrada, ¿verdad? Vale, de todos modos, así que aquí estamos creando una instancia de aplicación que está, la estamos conectando a una tienda y al router y la montamos en el elemento de la aplicación. En la tienda, no tenemos nada ahora mismo, así que empecemos con algo simple de nuevo, contar, simplemente es muy, muy común. Pero de nuevo, ten paciencia conmigo, haremos algo más divertido más tarde, ¿vale? Así que tendremos una mutación que básicamente aumentará el contador, ¿verdad? Y empecemos también con, acción, vale. ¿Cómo se implementará aquí, que nosotros, las acciones como sabemos sirven para cuando necesitamos lógica asíncrona. Y en este caso, podemos simplemente pasar el commit en el primer argumento, y luego podemos llamar a commit cierta mutación, ¿verdad? Así que, por ahora, este contador es totalmente síncrono, no tiene que hacer mucho, pero luego podemos hacerlo asíncrono.

Así que este es el estado muy simple. Ahora, si queremos, hacer uso de, valores reales del contador en el componente, crearemos un nuevo archivo. Además, no olvides usar extensiones para tu ID de elección, porque eso también hace tu vida más fácil y rápida. Estoy usando vetour, hay más herramientas agradables, pero esta, creo, es la más popular en este momento. Así que creará piezas predeterminadas para mí. Así que, ya importaré cosas. Así que no estoy perdiendo tu tiempo. Importaré computed y use store para que podamos usarlo en la función de configuración. Y en esta función de configuración, primero haremos uso de la tienda usando este hook de tienda. Y luego, como mencioné antes, podemos usar los elementos que obtenemos del contador para leer los valores e incrementar los valores. Y lo que es importante que mencioné es devolver las cosas que quieres usar en tus elementos DOM. Así que solo copiaré esos aquí. Sí, veo que hubo una mano levantada, llegaré a eso en un momento. Solo un ejemplo aquí, algo de marcado aquí, así que tengo un botón y el valor aquí debería funcionar. Déjame ver. Y por supuesto, necesitamos poner este objeto, este componente en algún lugar. Así que empecemos con solo ponerlo en la página de inicio. Eso probablemente debería hacer el truco. Solo comentaré el ejemplo de Hola mundo. Aquí, tenemos el contador y al presionar un botón, incrementamos el valor, ¿verdad? Así de simple. También podemos ver que está sucediendo en nuestras herramientas de desarrollo. Además, sobre las herramientas de desarrollo, asegúrate de tener una herramienta de desarrollo diferente. Quiero decir, ahora admite la versión tres pero hubo un tiempo en que no admitía ambas versiones y solía haber dos versiones mayores diferentes de una browser API o también una extensión de navegador. Y si estás usando la versión más antigua de una extensión de navegador, es posible que no detecte la nueva versión. Así que, es posible que solo quieras instalar otra. Entonces, si miro mi lista de extensiones en Chrome, verás que tendrá dos versiones debido a eso, pero tal vez ahora ya admite ambas. Necesito encontrar dónde está esta mano levantada. No a propósito. Bueno, bien. Sí. Así que, usemos principalmente el chat para señalar. Bueno. Es un ejemplo muy simple, solo para extender esto un poco. También podemos, ya que tenemos un contador que tenemos una mutación y tenemos acción. Entonces, desde el componente aquí estamos usando una mutación pero si queremos usar mutación. Podemos, lo siento, si queremos usar acción, todavía podemos hacer eso. Al, de nuevo, desde el objeto de la tienda, puedo llamar a dispatch directamente y me dará el elemento que necesito en el contador incremento. Y luego podré hacer esto usando acción. Así que, aquí ya estoy llamando a una acción. Entonces, en tus componentes, solo usando el objeto de la tienda que se devuelve de la nueva tienda, tú puedes acceder a ambas formas de mutar tu estado. ¿Cuál es el siguiente paso con eso? Podemos, por supuesto, ponerlo en algún lugar, digamos, afuera y hacer uso de un hook que será capaz de traernos el contador. Y esto es, de nuevo, como mencioné, todo esto, toda esta lógica que está sucediendo en la función de configuración, debería quedarse aquí. Debería ir a un archivo separado. Y eso es lo que vamos a hacer ahora. Comenzaremos con un ejemplo de contador, y luego construiremos más modelos, más data en la aplicación. Así que crearé una carpeta de hooks. Y crearé un ejemplo de uso de contador. Y básicamente solo copiaré todo, es más fácil. Como, ya que todavía solo tengo esto en mi función de configuración, es más fácil. Solo... Y lo llamaré UseCounter, de nuevo por convención. Bueno, lo que me falta, por supuesto, son esos chicos. Tienen que estar aquí, ¿verdad? De lo contrario, no tengo un computador o tienda. Así que estos, ahora puedo simplemente reemplazar todo eso con la importación de mi hook recién creado. Usaré esta auto-completación, porque con asterisco no funciona, y sigo olvidando el nombre. Normalmente deberías usar asterisco, por supuesto. El uso del contador y ellos se irán. Así es como extrajimos todo eso, incluido el uso de VUEX, en ese componente, en ese hook. Y ahora podemos tener la misma funcionalidad todavía funcionando. ¿Verdad? Veamos si nada se rompe o algo se rompe. UseCounter no está definido, porque no lo vi. UseCounter. UseCounter no está definido. Bueno, la funcionalidad todavía funciona de la misma manera. Lo bueno de esto es que podemos... es posible que no necesitemos todos los elementos de aquí, solo estamos usando Increment With Action, así que solo podemos tomar esos dos y solo usar esos dos, ¿verdad? Y estaremos... todavía estamos bien, ¿verdad? O si tenemos otro componente donde solo queremos usar el valor, ¿verdad? Solo estamos consumiendo el valor de la tienda, no incrementándolo. De nuevo podemos hacer eso bastante fácilmente. Por ejemplo, si lo tomo aquí, digamos...

También podemos, por supuesto, pasar las propiedades utilizando la sintaxis de valor de propiedad dinámica, ¿verdad? Así que creé esta página. Ahora agregaré esto rápidamente al enrutador. Y el último paso es agregar el enlace a él. De hecho, para agregar más enlaces, tengo, déjame hacerlo aquí. Eso es demasiado. Entonces, ¿qué, qué olvidé, olvidé el precio. El precio ya ha sido declarado. Probablemente aquí. Oh sí. Vale. Eso es porque, sí, estamos importando el mismo nombre. Entonces será como precio interno, por ejemplo. Y luego lo verás aquí. Pero si no queremos cambiar el nombre en la plantilla, podemos usar simplemente una asignación así. Y luego puedes mantener el nombre original en la plantilla. Esto no debería ser un problema. Espero que ahora el problema se haya ido. Entonces, ¿qué tenemos aquí? Una nueva página, que tiene tres elementos de producto. No se ve muy elegante, pero se entiende la idea. Tenemos la suma de los valores. Y luego, cuando estamos agregando a un botón de presión añadir a un carrito, obtenemos el evento. Y este evento también está bloqueado en nuestro componente principal por virtud de una simple función de bloqueo. Así es como también puedes reemplazar un objeto de método con las funciones que residen en tu función de configuración. Sin embargo, si estás en una etapa de migración de algo grande, todavía puedes tener un objeto de métodos. Eso no es mutuamente exclusivo todavía. Así que puedo tener métodos y poner aquí, digamos casi lo mismo, ¿verdad? Registro, y todavía puedo hacerlo aquí. El único problema, por supuesto, es que sobrescribirá la función de registro existente. Pero solo para demostrar la compatibilidad, todavía funcionará. Así que puedo registrar los valores de la misma manera, mientras estoy usando los métodos de la vieja escuela, ¿verdad? Pero eso es solo para mostrar. Vuelvo a este, de nuevo. ¿Por qué vuelvo a este? Porque puedo extraerlo y hacer uso de él de una manera más agradable, ¿verdad? Así que, aquí estoy pasando, como, en Vue 2, el valor, y está todo bien. Lo que quería mostrar es que actualmente tenemos un componente relativamente simple que solo tiene un parámetro de precio, ¿verdad? Pero normalmente probablemente tendrías múltiples campos que necesitas configurar. Y podemos hacerlo de muchas maneras, ¿verdad? Podemos pasar, como, definir un precio. En lugar de un objeto de precio, podemos tener, como, alguna propiedad llamada, digamos, configuración, y eso será, como, algún objeto que tendrá todas las cosas en él. Eso está bien. Eso funciona si no cambias cada uno de los valores por separado. Pero si los valores están cambiando, tal vez cambiados por separado, entonces la nueva característica agradable de la versión 3 es la llamada múltiples V-models. Así que ahora, cuando tenemos un componente con una propiedad, también podemos establecer el valor del V-model en él y cambiarlo desde el padre, ¿verdad? Creo que ese es un enfoque conocido. Así que puedes hacer, como, V-model-price, y luego asignarle algún valor. Digamos... Y luego, junto con cambiar este, tu modelo cambiará, ¿verdad? Pondremos, por ahora, digamos, 100. Y luego, solo para mostrar que está cambiando, lo pongo aquí. Y luego, si lo estoy cambiando allí... Oh, eso es donde... Un segundo. ¿Por qué está cambiando esto? Porque se estaba volviendo a renderizar aquí, por supuesto. Eso es lo que quería mostrar. Como, si... Al revés, por supuesto. Si pongo el valor aquí, entonces este valor será propagado al componente, ¿verdad? Y si cambio este valor en el padre, también será propagado en el componente. Antes de la versión 2, solo había un V-model posible. Sin embargo, en la versión 3, puedes tener múltiples V-models en un componente para vincular a diferentes propiedades. Y para eso, crearé un componente separado que tendrá esto implementado. Esta vez, solo estoy copiando y pegando más cosas para que no hagamos la misma escritura. Y se ve un poco más bonito. Cerraremos el resto. Y aquí, usaré el childAdvanced. Y para este childAdvanced, puedo configurar múltiples modelos como este. Así que childAdvanced tiene más propiedades. Tiene un precio y una cantidad, como dos variables numéricas que pueden estar cambiando por separado. Y ahora puedo configurarlos, vincularlos a valores específicos en mi ámbito principal utilizando dos v-models que apuntan a los elementos específicos, ¿de acuerdo? No es directamente, digamos, parte de la composition API, pero algo que añade view three. Así que este último producto aquí, tiene, déjame separarlo un poco. Así que este último producto, tiene dos valores en él. Y esos valores se establecen desde el padre y puedes rastrear esos cambios. Así que eso es para el emit, cómo haces la emisión en el hijo utilizando la variable emit del contexto. Y también un elemento importante, tienes que declarar qué eventos emite tu componente? Como, ves aquí, tengo esta propiedad emite. Como, si creo otro evento diciendo, no aquí, pero veamos, creo un evento aquí diciendo como esto, entonces debería obtener una advertencia porque eso es, espera, es, creo que solía haber una advertencia. Ahora, no estoy seguro, nada, estoy bastante seguro de que había alguna explicación que solía tener una advertencia en este caso, pero entonces está comprobando qué elementos estás declarando en el meet. Extraño, tal vez por esto. Vale.

De acuerdo. No importa. Pero no evites declarar todos los eventos que tienes en tus componentes hijos. Esa es una propiedad específica que tienes ahora en tu declaración. Tal vez se comprueba durante el tiempo de compilación o algo así. Estoy seguro de que tiene algunas comprobaciones.

De acuerdo. Eso es todo. También vi un par de preguntas y sí, antes de pasar a la siguiente parte de la demostración, que trata sobre la carga de datos, responderé a la pregunta. Así que por favor, pónganlas en la sección de preguntas y respuestas o escríbanlas en el chat. O todos ustedes fueron a verificar este enlace de GitHub. Y realmente vale la pena. Reproduce muchas cosas similares de las que estoy hablando durante esta masterclass. Así que las preguntas. Comenzando por la pregunta de Martin, ¿se puede reemplazar el bloque de datos por Reactive? ¿Se puede reemplazar el bloque de datos por Reactive? Así que supongo que te refieres a este bloque. Sí, se puede reemplazar. Sí, es cierto. Lo único que quiero decir, si tú... Sí, sí, absolutamente se puede reemplazar. Así que podemos mover todas esas cosas aquí. Como esto, y luego solo recordamos esto, esa función unref que estaba en una de las diapositivas, así que también podemos hacer uso de ella aquí, ¿verdad? Y luego tendremos los mismos valores aquí y aquí. Así que sí, ese es un cambio totalmente válido, sí. Otra pregunta de Steve. ¿Por qué se necesita definir el componente aquí pero no en el ejemplo del contador? Sí, eso es como mencioné. Solo tenía diferentes formas de definir componentes solo para mostrar que hay diferentes soluciones. Solo por eso, puedes vivir sin un componente definido o puedes usar un componente definido en todos los casos. Eso se puede usar indistintamente. Solo el hecho de que el componente definido agrega un mejor soporte para el IDE y TypeScript. Vale, y una pregunta más de Luca. ¿Sabes si hay algún plan para admitir la sintaxis de estilo de clase en Vue también? Sintaxis de estilo de clase, ¿te refieres a la definición de componentes, supongo? ¿Como en Vue 2, este envoltorio para TypeScript, ¿verdad? Sí, no tengo idea. Sinceramente, conozco este enfoque como mencionas con las anotaciones para hacer tu código de Vue 2 lo más tipado posible, sí, pero sí, no tengo idea de cuál es la hoja de ruta para esto ahora. De acuerdo, bien, ahora, si no hay más preguntas, pasemos a la parte de carga de datos donde crearé algunos componentes más para mostrar la configuración típica para cargar datos con la API de Composición de Vue 3. Para esto, necesitaré, crearé una carpeta de repositorio simple que contendrá mis llamadas a la API. Para esto, simplemente usaré el backend de demostración de JSON placeholder, así que si nunca lo has visto, échale un vistazo. Es una herramienta agradable para jugar con algunos datos estáticos, como tiene esos elementos que puedes consultar si solo quieres verificar si tu fetch funciona o si tu código funciona correctamente, así que nos da datos estáticos. Creo que también puede dar un elemento por ID así, por lo que puede cargar una lista y un solo elemento en tu código, así que lo usaré para la demostración. Aquí solo puse el punto final de la API base y tengo algunos fetchers para diferentes tipos de datos. Luego usaré uno de ellos para más cosas. Sí, buen punto Andrei. Como dije, para esto necesitaré comprometer el estado actual. Haré esta parte de la demostración y luego me ocuparé de eso, ¿de acuerdo? Aquí creamos un archivo de repositorio que hará una carga de datos para nosotros. Luego crearé un componente de carga de datos que, sí, básicamente cargará los datos. Copiaré algunas partes. Me pediste nuevamente que creara una plantilla de carga de datos que hará una carga de datos. Como voy a usar los datos de usuario, usaré la plantilla de una tarjeta que se usa en Bootstrap, como un bloque típico con información, y aquí tendré nuestra definición de componente. Así que eso es el comienzo, ahora lo que vamos a hacer, vamos a crear un indicador que contendrá los elementos y que también tendrá, por ejemplo, el seguimiento del estado actual de carga, y luego también podremos extraer todas estas cosas a, por ejemplo, componentes separados, y también hacer uso de filtrado y cosas así. Así que empecemos con una versión simple donde copiaré, crearé un objeto usando ref que contendrá los datos cuando se carguen. Crearé una función que carga los datos. Es una función sincrónica, que utiliza await en su interior para cargar los datos, ¿verdad? ¿Qué más tenemos aquí? Tenemos el gancho del ciclo de vida. Se utilizará el gancho del ciclo de vida cuando se renderice el componente. Ejecutará la consulta de datos. Y por último, solo necesitaremos devolver esta información, ¿verdad? Solo los datos del usuario, y eso es lo que queremos devolver actualmente. Así que solo los datos del usuario, y eso debería ser, creo que solo olvidé algo de marcado. Oh no, el marcado está aquí. Así que estoy tomando el usuario de los datos del usuario, y luego muestro el nombre de usuario, la ciudad del usuario, y blah, blah, blah. Nuevamente replicaré una nueva página. Para que tengamos más elementos en la demostración entre los que puedes cambiar. Ahora tenemos una nueva página llamada carga de datos y ya ha cargado algunos datos. Veamos cómo sucede. Básicamente, cuando estoy actualizando la página, debería haber una llamada a los usuarios que me devuelve la lista de fallos. Y luego tienes esta lista de usuarios, ¿verdad? Esa es una implementación bastante sencilla donde simplemente estamos solicitando crear una función que realizará la operación sincrónica y luego se llamará durante la parte desmontada. Eso es bastante sencillo. Entonces, lo que podemos querer hacer en el futuro, por ejemplo, si tienes una lista de usuarios y necesitamos buscar dentro de esta lista algún dato adicional, podemos hacer eso. Por ejemplo, podemos agregar la capacidad de buscar en esta lista. Para eso, por ejemplo, podemos crear una barra de búsqueda en la parte superior que hará una... Podremos hacer una búsqueda de usuarios. Ahora no hace nada, pero vamos a implementar esta búsqueda.

Entonces, lo que tenemos aquí, podemos obtener para la búsqueda, creamos una referencia que realizará el almacenamiento del valor. Ahora mira esto, he creado una variable de búsqueda, una constante en este caso, y la estoy usando aquí para un modelo V, pero no la estoy devolviendo, y por eso también obtengo la advertencia. No olvides devolverla aquí. Por ahora, la hemos conectado al modelo, pero aún no hace nada, ¿verdad? Si miro en mi inspector en las herramientas de desarrollo de Vue, voy a datos de carga, veo que tengo usuarios cargados, todos los elementos están aquí, y la búsqueda es completamente reactiva, pero no tengo ninguna lógica que realmente realice la búsqueda. Así que implementemos esta lógica primero. Podemos crear, por ejemplo, una nueva lista que almacenará los valores, o simplemente podemos crear una función que modificará la lista existente. Así que tengo esta variable aquí llamada usuarios que coinciden con la consulta de búsqueda, y utilizará una función computada que dentro hará simplemente el filtrado en cada elemento del array. Y aquí, lo que estoy haciendo, tomo los datos de usuario, los valores que se cargan durante la llamada al backend, y luego hago el filtrado, y hay una devolución de llamada para el filtro. Paso básicamente un comprobador que va a cada elemento y verifica si sus nombres incluyen el valor del campo de búsqueda, ¿verdad? Eso es bastante sencillo. Solo ten en cuenta nuevamente, el uso del valor aquí y el uso del valor aquí porque este es un ref que necesita, necesitas tener este punto valor para acceder a sus datos. ¿De acuerdo? Así que ahora estoy comprobando la actualización cargada. De acuerdo, rompí algo, por supuesto, porque no tengo computado importante. Eso es triste. Así que tengo la lista de usuarios cargados inicialmente y ahora intentaré buscar, por ejemplo, Path 3, supongo que puedo, debería, por supuesto, estoy tomando el valor y luego puedo usar este valor en mi marcador de componente, poniéndolo aquí. Solo por ahora, tengo todos los elementos y luego busco el primero, por ejemplo, el Yen, no estoy haciendo la conversión de mayúsculas y minúsculas solo por simplicidad. Así que mantengámoslo como está ahora. Entonces, Yen, obtienes un elemento. Y si escribo algo sin sentido, no mostrará ningún elemento. Entonces, si solo uso Lee, tendré varios elementos porque hay un par de usuarios con un nombre similar. Esta es una búsqueda en la lista cargada de elementos. ¿Qué pasa si lo hago aquí? Lo pondré así. Y luego, si elimino esta salida JSON, aún puedo hacer la búsqueda aquí, ¿verdad? Así que funciona en ambas direcciones, puedo cargar la lista y también puedo buscar en ella después de que se carguen los datos. De acuerdo. Ese es un ejemplo sencillo que implementa la búsqueda.

Seguro, sí, pensé que le da algo de enfoque, pero seguro, puedo desactivarlo por ahora. Sí, ese es un ejemplo con la carga de datos desde una llamada asíncrona a la API del backend y la búsqueda en ella. Mantendré esa pantalla por un segundo, tal vez por un par de minutos, para que puedas echar un vistazo y hacer preguntas si las tienes, mientras arreglo el problema con el repositorio, y luego continuaremos, ¿de acuerdo? Solo dame dos minutos, si no me lleva más tiempo, y luego continuaremos. Mientras tanto, por favor, si tienes preguntas sobre la parte inicial con la teoría, o tal vez sobre los ejemplos prácticos que mostraré, no dudes en ponerlas en la sección de preguntas y respuestas o escribir en el chat. Volveré a ti tan pronto como termine con el repositorio, ¿de acuerdo? Además, considerémoslo como una especie de pausa rápida para rellenar tu café, cola, agua o cualquier actividad sanitaria, ¿de acuerdo? Pero te mostraré lo que tenemos en la lista de XFDA, para que realmente puedas usar esa cosa para obtener fácilmente tu bebida y agua. Cómo lo hacemos es, ponemos todo en el orden escaneable y luego lo subimos a la excusa. Así obtenemos una lista de XFDA, y el XFDA simplemente coloca los detalles en el orden escaneable. ¿De acuerdo? Así que acabo de arreglar esa parte, y ahora las fuentes... lo siento, la carpeta de ejemplos, contiene todos los elementos que mostraré durante el taller, y tal vez incluso más de los que podré mostrar durante este evento. Así que por favor, si quieres seguir mirando el código, puedes verificar esta URL y clonarlo y hacer uso de él. ¿De acuerdo? Solo si ya lo bifurcaste, asegúrate de obtener la última versión. Así que hagámoslo un minuto más y luego continuaremos con el resto de la demostración. De acuerdo. Así que estoy de vuelta y continuemos con el resto de las demostraciones. En primer lugar, quería dejar espacio para las preguntas sobre los elementos ya mostrados, como cómo cargamos datos, cómo creamos nuevos hooks, y cosas así. Si hay algún elemento específico, por favor, ponlo en la sección de preguntas y respuestas o pregúntalo en el chat. Intentaré responder de inmediato. De acuerdo, sigamos adelante. Lo que voy a mostrar ahora es la parte sobre cómo usar realmente esta biblioteca VueUse que mencioné en las diapositivas. Es una pieza de software realmente genial que es útil para aprovechar muchas de tus tareas regulares de código. Y eso es lo que tengo aquí en un archivo separado que agregaré rápidamente a mi página. Oops... Solo un momento... Así que solo usaré una página de inicio para este experimento solo porque es más rápido. Comentaré el contador ahora. Entonces, primero, el de las variables CSS. Todos conocen qué es una variable CSS, ¿verdad? Es como un valor que se establece en el CSS, generalmente en el elemento raíz o en la raíz del contenedor, y luego puedes usarlo en otros bloques dentro del CSS. Ahora, una parte interesante es que también puedes cambiarlo. Y para eso, VueUse tiene un gancho llamado useCSSVar. Y lo hace así, le proporcionas el nombre de una variable y un enlace ref, el elemento que estará rastreando. Específicamente, creé la variable CSS aquí en la raíz de mi demo, un archivo index HTML de demostración. Y para este selector raíz, he colocado una variable llamada color y esto usa el valor azul, un bonito color azul. Así que vamos a acceder a esta variable dentro de nuestro componente. Ya lo tengo aquí. Entonces, lo que voy a hacer, solo necesito devolverlo. Básicamente, esos elementos se describen en parte en la documentación. Es más para darte más ejemplos de cómo se puede usar la API de composición y también cómo se pueden usar otros hooks personalizados. No es algo que no puedas probar tú mismo. Es más solo ejemplos que puedes reproducir rápidamente. Y aquí puedo usar la variable color para establecer el color en el bloque de estilo en línea o simplemente imprimirlo si quiero. Así que ahora, si lo intento, probablemente olvidé poner algo, por supuesto, olvidé la referencia. Ahora ves que tengo el color y se toma exactamente del CSS que está aquí en nuestra etiqueta de estilo. Así que el color está aquí y aquí veo el mismo valor. Podemos leer esas variables.

Y también, por supuesto, si queremos cambiar algo, también podemos hacerlo. Entonces, si cambiamos el color, ajustará el valor, y todo el resto del contenido será… Todo el resto de los estilos CSS que usan la variable CSS cambiarán. Eso es uno.

Otro elemento agradable que puede ser útil para nosotros es trabajar con almacenamiento local y almacenamiento de sesión. Eso realmente funciona de manera bastante sencilla. Puedes usar el hook llamado UseClip, UseStorage. Y luego aquí, creé el objeto llamado Title, y eso escribirá el valor en la clave específica de nuestro almacenamiento local. ¿Y el valor será, por ejemplo, de un título de documento, verdad? Entonces, en realidad puede ser cualquier variable. Puede ser solo una cadena aquí, ¿verdad? No está vinculado a ninguna lógica específica por ahora. Solo puede ser almacenado aquí. Y ahora, si abro mi aplicación y actualizo la página y voy al almacenamiento local, verás aquí que el valor ya está colocado. Lo siento. Solo necesito actualizar. Y buscarlo. Entonces, por ejemplo, si tomo un título de documento. Luego pondrá este valor en el título del documento. Pero lo bueno de esto es, por ejemplo, quiero cambiar el valor. También hay un hook separado para esto para cambiar un título de documento directamente desde tu código. Sé que no es algo que haces a menudo. Pero te da un ejemplo de esas utilidades modulares que puedes usar en el uso de Vue y bibliotecas similares. Por ejemplo, uso el hook llamado UseTitle. Y este hook conecta document.title con tu código. Y no solo puedes leerlo, sino también escribirlo. Entonces aquí creé la función que cambiará el valor llamado SetTitle. Así que lo estoy importando aquí. Y ahora el valor también se escribirá dentro de la historia de la sesión. Entonces, solo para mostrar eso, crearé rápidamente una función. Me falta una parte. Déjame ver. Y sí, SetTitle. Ahí es donde también necesito poner el valor. Y también cuando cambio el título, también necesito usarlo aquí. Un momento. Extraño. Título guardado. Sí, está bien. Lo siento por la confusión. Entonces, lo que estaba haciendo aquí, creé un objeto reactivo que estará conectado a esta propiedad específica, mi almacenamiento, almacenamiento local. Y inicialmente pondrá este valor en él. Pero luego, si estoy sobrescribiendo, también puedo cambiar el valor, y se actualizará automáticamente también en mi almacenamiento de sesión. Entonces, nuevamente, estoy conectando algo fuera de mi componente, casi fuera de la aplicación, a solo una lógica dentro del componente. Y puedo, de nuevo, extraer fácilmente esta lógica a un hook separado y hacer uso de él allí. Entonces, esos son algunos ejemplos de cómo puedes usar una biblioteca llamada VueUse. Tiene muchas más características útiles allí, así que pruébalo. Y ese es un ejemplo que quería mostrar específicamente sobre otras bibliotecas.

Lo que también tengo es otra característica que también Vue 2 solía tener, pero se convirtió en un uso mucho más avanzado en la versión tres, que se llama Proporcionar Inyectar. Creo que también hubo una pregunta al respecto durante la parte con las diapositivas, así que voy a recrear rápidamente la construcción de Proporcionar Inyectar, que también utilizará la API de HOOQS, la API de Vue 3 para proporcionar datos que se inyectarán en el nivel superior y se consumirán en un nivel inferior de mi aplicación. Para eso, usaré este tipo de construcción, este tipo de sintaxis, lo siento. Lo que pongo aquí, creo un símbolo único, que está vinculado a un conjunto específico de detalles y aquí lo llamo Tema porque quiero decir que pueden ser algunas configuraciones, algunas configuraciones visuales para tu aplicación, como formulario predeterminado, fondo predeterminado, tal vez título de una aplicación o tamaño de un formulario, cosas como esta y aquí estoy creando dos funciones, dos devoluciones de llamada que puedo usar para proporcionar algunos datos en el componente de nivel de ruta y puedo tomarlo en el componente secundario que está más abajo en la lista del árbol de componentes. Esta es una construcción típica para esta característica de proporcionar inyectar y este valor aquí está codificado, pero puedes imaginar que podemos tomarlos de alguna API o de algún archivo de entorno o lo que sea y aquí solo necesito usar el tema de proporcionar en el componente raíz donde quiero hacer uso de él. Por ejemplo aquí. Es demasiado lejos. Y para poder agregar estos datos sobre el tema en el contexto, solo necesito llamar a este proveedor dentro de una función de configuración. Y ahora digamos en uno de los componentes secundarios, los que muestran nuestro catálogo que estaba mostrando antes, puedo hacer uso de este elemento para obtener acceso a esta información. Probemos eso. Ahora encontraré este componente, el componente secundario, y solo obtendré estos datos de allí. Lo que necesitaré hacer, necesitaré importar el uso del tema en este componente secundario. Y ahora para este uso del tema, puedo poner estos datos que devuelve el uso del tema en alguna variable extra, por ejemplo, que se devuelve de un método de configuración. Digamos tema. Y eso es. Entonces debería poder acceder a las variables del uso del tema. Directamente en la plantilla. Primero veamos lo que tiene. Entonces, ahora tengo toda esta información, y ahora puedo simplemente hacer uso de algo de eso. Digamos. El fondo será esto, y el color principal será, por ejemplo, el otro elemento que tengo allí. Que se llama color principal. Así, veamos si funciona. Ahora, estoy pasando directamente... Ves, ahora está usando esos colores que estaba estableciendo en el tema a lo largo de la lista de componentes.

Si observamos nuestras herramientas de desarrollo de vista, lo siento, herramientas de desarrollo de vista, verás que tenemos varias capas y a través de ellas obtenemos esos data para pasarlos directamente sin problemas. Ese es un ejemplo de provide inject en pocas palabras que puedes utilizar propiedades, omitiendo varias capas de otros componentes.

En cuanto a otros ejemplos de code, creo que el interesante es donde podemos vincular data que se almacena en nuestra tienda Vuex a un hook personalizado que solo tratará con estos data. Y para eso, utilizaré nuestra página anterior con listas de usuarios. Y digamos que tenemos una lógica en la que puedes seleccionar ciertos datos de usuario y luego mostrarlos en otro lugar, ¿verdad? Algo como datos de usuario, datos de este usuario específico que ha iniciado sesión. Y para eso, crearé un botón separado que guardará los datos de este usuario. Y para esto, encontraré el bloque correcto. Entonces, para esto, necesitaré agregar a mi lista de usuarios algún botón que realizará la selección. Veamos dónde está. Probablemente esté en la sección de carga de datos aquí. Así que tengo los usuarios aquí y digamos que cuando haga clic en un usuario específico, quiero almacenar sus datos en una partición separada de Vuex. Agregaré el evento onclick. No es, digamos, algo como la ciencia de cohetes, pero simplemente mostraré la parte con un objeto calculado completo que se almacenará como un hook separado y que proporcionará todas las conexiones a la tienda. Así que tendremos una separación agradable como un componente que usará el hook y el hook usará la tienda. Así que estarán completamente descompuestos entre sí. Por eso creo que es un buen ejemplo para mostrar al final.

Así que creé el método select user, lo estoy importando aquí. Lo que haré aquí, es que utilizaré un hook llamado use user que no voy a crear. Y creé el método select user que seleccionará a este usuario específico, colocando este usuario en esta tienda, parte de nuestra tienda VUX. Así que eso es solo una preparación. Por supuesto, también necesito implementar nuestros elementos de la tienda VUX para guardarlo e implementar también el hook. Así que hagamos lo primero con la tienda. Abriré nuestra tienda y agregaré una nueva propiedad aquí, solía tener solo el contador, pero también he creado datos de usuario. Luego crearé una mutación para agregar los datos de usuario a la tienda. Eso es bastante sencillo, ¿verdad? También crearé un getter para recuperar sus datos. De acuerdo, y estos datos de usuario solo toman esta propiedad y eso es todo. Así que eso es como una preparación, ya ahora lo que podríamos hacer, podríamos usar un componente y llamar al VUX y hará el trabajo, ¿verdad? Pero si queremos lograr una mayor separación, entonces, como dije, agregaremos un hook separado que solo funcionará con el usuario y luego servirá ese propósito específico y podemos tener tantos hooks para objetos de datos específicos como queramos. Así que estoy creando nuestro hook llamado user, que por supuesto es un nombre muy útil para encontrar un mejor nombre, pero por ahora creo que eso debería funcionar. Entonces, lo que voy a hacer aquí, voy a crear nuevamente una función personalizada que devolverá este objeto de usuario, ¿verdad? Y dentro de él, usaré una tienda como hice con el contador porque ahí es donde este hook se conectará a una tienda. Y lo que hago a continuación, uso un método compute. Ya explicamos qué hace el método compute, ¿verdad? Crea un nuevo valor derivado que se basará en las dependencias de lo que se proporciona en el callback, ¿verdad? Pero aquí, lo que estaba mostrando antes es así, algún callback, y luego este callback hace cosas que es como la versión uno. Pero lo que voy a hacer, voy a usar getters y setters. Esa es otra API que está disponible para un objeto computado. Entonces, para esto, básicamente proporcionas como cualquier otro objeto JavaScript, proporcionas getters y setters que funcionarán con el valor de este objeto. Y luego puedes realizar cierta lógica cuando se recupera o se establece este data, ¿verdad? Y aquí, ¿adivina qué? Lo conectaré a la tienda, ¿de acuerdo? Y luego esta será la conexión desde el hook hasta la tienda y el hook se utilizará nuevamente en el componente. Así es como el componente nunca sabrá acerca de la tienda. Entonces, pondré el set, el getter utilizará el getter de Vuex, ¿verdad? ¿Y el setter, adivina qué? Utilizará la forma de modificar la tienda, lo que significa que confirmará los datos de usuario, ¿verdad? Esa es la idea. Entonces, estamos utilizando un objeto computado que tendrá getters y setters que interactuarán directamente con la tienda. Con la tienda gestionada por Vuex. Y luego ahora, si quiero obtener esta información, digamos que tengo algún componente de encabezado donde quiero mostrar un usuario recién seleccionado. Solo crearé una plantilla simple. Y luego, lo que sigue, también utilizaré este hook aquí. Pero solo me interesa el valor real, así que incluso puedo hacer esto. Lo cual funciona. Todavía no importé el usuario, así que necesito hacerlo rápidamente, de lo contrario tendré problemas. Entonces estoy importando el usuario aquí, y también estoy importando este usuario aquí. De acuerdo. Entonces, en un componente, estoy usando un hook solo para leer el valor. Y en otro componente, estoy usando este hook para poder establecer el valor. Y veamos si funciona como debería. Probablemente, olvidé un elemento importante que es agregar el componente de encabezado. De lo contrario, no funcionará. Entonces lo importaremos aquí. Es la salsa secreta mágica para asegurarse de que esta parte funcione. Entonces tengo un encabezado y luego simplemente usaré este encabezado aquí. De acuerdo, ves aquí, el usuario no está seleccionado, pero lo que me falta aquí es el botón seleccionado. Eso es probablemente, C, sí, debería ser simplemente clickable por toda la luz. De acuerdo, así que ves que cambia, pero pone algún evento de puntero en lugar del usuario real, solo se puede solucionar llamando a la función con el argumento adecuado, porque aquí realmente estoy esperando este argumento. Entonces ahora obtendré los detalles completos de cada usuario. El que hacen clic en el componente subsiguiente. Solo para que sea un poco más agradable, pondré solo el nombre de usuario. Ahora, usuario, déjame ver allí. Porque tiene otra propiedad de usuario en él. Sí, así. O incluso puedo hacer el uso de refs. ¿Verdad, sí? Entonces, esa también es una parte agradable de los hooks. Si no necesitas todo lo que proporciona, puedes ponerlo directamente en la parte de retorno de tu función de configuración, y estará bien. Lo único que no debes olvidar es importar los refs aquí. Entonces, esto y luego debería ser user.name.

Sí, ahora al hacer clic en diferentes usuarios, obtienes el cambio de nombre seleccionado, ¿verdad? Además, todavía puedes filtrar y eso también debería cambiar. Así funciona con esta construcción donde tienes un hook que solo sirve una parte específica de la tienda. Y eso es lo que se utiliza en varios componentes. Así es como puedes lograr como la máxima descomposición, diría yo. Y este patrón también es agradable. Entonces, cuando tienes, digamos, objetos de usuario más complejos que tienen muchas propiedades en ellos y diferentes lógicas, entonces puedes crear esos tipos de agregados que realizan diferentes actividades como con todos los getters y setters, ¿verdad? Esa es la última demostración que quería mostrar.

Entonces veo una pregunta de Aaron preguntando qué son los tres puntos en el hook de usuario. Veamos. Tres puntos en el hook de usuario. Lo siento, no veo ningún punto aquí. ¿Quieres decir, tal vez aquí? Sí, esos tres puntos son solo lo mismo que cualquier deconstrucción de JavaScript, como cuando estás descomponiendo objetos en piezas. Correcto. Eso es eso. ¿Cómo se llama, resto o propagación? Propagación, creo, ¿verdad? Así es como es. Es lo mismo que estarías haciendo, digamos si estás en, si estás usando Burix y estás haciendo como map actions, entonces tendrás lo mismo. Así que es sintaxis básica de JavaScript, no es algo sofisticado. Bien, esta pregunta está hecha. Sí, probablemente propagación. Sí, gracias por la, sí, por las aclaraciones, Steve. Genial. Veo una pregunta más de Andre, ¿es el hook lo mismo que composable? Sí, eso es, también lo dije al principio, creo que todavía se utilizan diferentes términos. Hook, composable, comportamiento. Los uso indistintamente. Cuando me refería específicamente a los hooks de React, me refería a los hooks de React, pero eso es, sí. Genial, eso es todo para la demostración. Espero que te haya gustado y de nuevo, enviaré el enlace aquí en el chat para que puedas intentar jugar con él. Más tarde, solo un par de cosas más de las que hablar es sobre la migración, así que también recuerdo que algunos de ustedes mencionaron que todavía están usando la versión dos y si eres especialmente un autor de bibliotecas, hay una herramienta agradable llamada Vue Demi que permite soportar ambos entornos, ambas funcionalidades en Vue 2 y Vue 3. Así que solo instalas Vue Demi e importas todo lo que necesitas de él y dentro de él, se redirigirá. Así que tiene como dependencias de ambos proyectos, ambas versiones y cargará la correcta para ti dependiendo de ciertas configuraciones. Esa es una buena herramienta para si estás usando, escribiendo como una biblioteca o ya tienes una biblioteca o tienes algún plugin que estás usando y quieres que sea capaz de soportar ambas versiones hasta que el tiempo se agote para la versión 2. Así que eso es una cosa, un Vue Demi y la segunda es la construcción de migración. Es algo que está bien descrito en la documentación oficial. Es como una configuración especial en la que puedes poner tu aplicación donde puedes habilitar características una por una cuando estás realizando una migración de alguna aplicación más grande, que tiene muchas páginas, muchos componentes, muchas características, que básicamente añades una dependencia llamada vue-compat y reemplazas tu versión dos con la versión tres y luego empiezas básicamente a cambiar las versiones, lo siento, empiezas, puedes alternar todas las características que añade la versión tres y puedes ir reescribiendo gradualmente tu versión v2 en v3 y asegurarte de que nada se rompe o al menos si sabes que algo se rompe y no puedes reescribirlo rápidamente, entonces puedes desactivar esta característica, ¿verdad? Y luego puedes continuar durante algún tiempo usando la versión tres, pero estará como envuelto con esta construcción de compatibilidad de vista. Así que esa es una característica agradable para las migraciones graduales. Espero que aquellos de ustedes que usan v2 tendrán más migraciones pronto y tendrán más usuarios de la versión tres, y sí, eso es principalmente para mi masterclass. Estoy realmente feliz de que ustedes se hayan quedado hasta el final. Me fascinó la cantidad de preguntas y estaré feliz de responder más de ellas si las tienen ahora. Y si no las tienen ahora o les gustaría aclarar algo más tarde, por favor síganme en Twitter. Estaré encantado de charlar allí. Así que eso es todo, también coloco los enlaces una vez más aquí en la diapositiva. Y si tienen alguna pregunta, por favor no duden en preguntar. Y espero haber respondido a sus preguntas. Gracias Ricardo, espero que te haya gustado. Espero que te hayas emocionado por usar Vue 3 y todos los patrones de composabilidad que tiene y debería hacer nuestra vida más fácil y más eficiente como desarrolladores. Gracias Karen. Que tengas una buena tarde, si ya es tarde para ti. Fue realmente un placer compartir todo eso con ustedes. Gracias, adiós.