Related summaries to Performance optimization

You are using useFetch WRONG! (I hope you don't)

Cette vidéo traite de l'utilisation correcte de la fonction Fetch dans un contexte Vue.js. L'auteur commence par montrer un exemple d'application avec un formulaire de connexion qui utilise la fonction Fetch de manière incorrecte. Cela entraîne de nombreux appels inutiles à l'API de connexion, à chaque fois que l'utilisateur tape quelque chose dans le formulaire. L'auteur explique que le problème vient du fait qu'il utilise la fonction composable `useFetch` à l'intérieur d'un gestionnaire d'événements, alors qu'elle devrait être utilisée uniquement dans le bloc `setup()` ou `script setup`. En effet, `useFetch` crée une instance réactive qui surveille les données passées en paramètre, ce qui entraîne des appels multiples lors de la modification de ces données. La solution proposée est d'utiliser plutôt la fonction `$fetch` de manière directe, sans passer par un composable. Cela permet d'éviter les problèmes de réactivité et de ne faire qu'un seul appel à l'API lors de la soumission du formulaire. L'auteur mentionne également une autre approche possible, qui consiste à utiliser `useFetch` de manière contrôlée. Dans ce cas, on extrait la logique d'appel à l'API du gestionnaire d'événements, on la place dans une fonction `execute()` indépendante, et on désactive la réactivité des paramètres passés à `useFetch`. Cela permet de conserver les avantages de `useFetch` tout en évitant les problèmes de réactivité. En résumé, la vidéo met en garde contre l'utilisation incorrecte de `useFetch` et propose deux solutions alternatives pour gérer les appels à l'API de manière plus adaptée dans un contexte Vue.js.