Composables

Domina la reactividad de Vue 3

¿Qué es un composable?

Lo importante

1. Por primera vez podemos extraer y utilizar la reactividad de Vue fuera de los componentes.
    
2. Eso quiere decir que todo código que use reactividad puede ser extraído y reutilizado como composable.

VS utility function

• Las funciones de utilidad (custom o importadas como Lodash o Day.js) no tienen estado (stateless).
• En cambio, las funciones compositoras (composables) si lo tienen... y lo mantienen a nivel global (stateful) si así lo deseas.

Show me the code

Show me the code

Show me the code

1: Posición del ratón

• Queremos capturar la posición del ratón.
• Queremos tener la última posición siempre actualizada.
• Queremos compartir esta funcionalidad en otras partes de la App.

2: DOM API reactiva

• Queremos saber cuando un elemento es visible en el viewport.
• Queremos usar la "nueva" Intersection Observer API para hacer lazy-load.
• Queremos compartir esta funcionalidad en otras partes de la App.

3: Tareas asíncronas

• Queremos realizar una petición a un recurso externo.
• Queremos utilizar Async/Await y try...catch.
• Pero queremos abstraer esa lógica y reutilizarla en toda la App.

Conclusiones

• ¿Cuánta lógica reactiva de tus proyectos puede ser extraída a un composable?.
• ¿De verdad necesitas Vuex o Pinia para todos tus proyectos?.
• ¿Cómo serían tus componentes (lean) si solo tuviesen el estado y lógica local (representacional) indispensable?.

Vue Use

• La mayor colección de composables listos para utilizar.
• 100% plug & play.
• Compatible con Vue 2 y Vue.

Buenas prácticas

• Comienza pensando en el fin (inputs y outputs, como en los test unitarios).
• Usa el mismo patrón de nombre en todo el proyecto (ej: useFeature).
• Retorna valores readonly por defecto.
• Crear stateless composables por defecto. 
• Otras buenas prácticas.

Gracias