Virginie Vachet
@virginievachet.bsky.social
Développeuse FrontEnd
Mes principaux sujets: #accessibilite #vuejs #vuetify #nuxt #typescript
Mes principaux sujets: #accessibilite #vuejs #vuetify #nuxt #typescript
🎯 Conclusion :
Avec effectScope et getCurrentScope, vous avez un contrôle précis sur la réactivité. Ces outils sont essentiels pour des projets Vue.js complexes afin d’assurer des performances optimales et d'éviter les fuites mémoire.
#VueJS #Réactivité #Performance
Avec effectScope et getCurrentScope, vous avez un contrôle précis sur la réactivité. Ces outils sont essentiels pour des projets Vue.js complexes afin d’assurer des performances optimales et d'éviter les fuites mémoire.
#VueJS #Réactivité #Performance
December 17, 2024 at 5:19 PM
🎯 Conclusion :
Avec effectScope et getCurrentScope, vous avez un contrôle précis sur la réactivité. Ces outils sont essentiels pour des projets Vue.js complexes afin d’assurer des performances optimales et d'éviter les fuites mémoire.
#VueJS #Réactivité #Performance
Avec effectScope et getCurrentScope, vous avez un contrôle précis sur la réactivité. Ces outils sont essentiels pour des projets Vue.js complexes afin d’assurer des performances optimales et d'éviter les fuites mémoire.
#VueJS #Réactivité #Performance
6️⃣ Résumé des avantages
✅ effectScope :
Regroupe plusieurs effets réactifs dans une même portée.
Facilite le nettoyage avec scope.stop().
✅ getCurrentScope :
Vérifie la portée active pour des effets conditionnels.
Combinez-le avec onScopeDispose pour un nettoyage automatique.
✅ effectScope :
Regroupe plusieurs effets réactifs dans une même portée.
Facilite le nettoyage avec scope.stop().
✅ getCurrentScope :
Vérifie la portée active pour des effets conditionnels.
Combinez-le avec onScopeDispose pour un nettoyage automatique.
December 17, 2024 at 5:19 PM
6️⃣ Résumé des avantages
✅ effectScope :
Regroupe plusieurs effets réactifs dans une même portée.
Facilite le nettoyage avec scope.stop().
✅ getCurrentScope :
Vérifie la portée active pour des effets conditionnels.
Combinez-le avec onScopeDispose pour un nettoyage automatique.
✅ effectScope :
Regroupe plusieurs effets réactifs dans une même portée.
Facilite le nettoyage avec scope.stop().
✅ getCurrentScope :
Vérifie la portée active pour des effets conditionnels.
Combinez-le avec onScopeDispose pour un nettoyage automatique.
5️⃣ Quand utiliser effectScope ?
Dans des composables pour éviter les fuites de mémoire.
Pour regrouper plusieurs effets réactifs complexes dans une même portée.
Lorsque vous travaillez avec des API externes (ex. : setInterval, fetch) pour centraliser le nettoyage.
Dans des composables pour éviter les fuites de mémoire.
Pour regrouper plusieurs effets réactifs complexes dans une même portée.
Lorsque vous travaillez avec des API externes (ex. : setInterval, fetch) pour centraliser le nettoyage.
December 17, 2024 at 5:18 PM
5️⃣ Quand utiliser effectScope ?
Dans des composables pour éviter les fuites de mémoire.
Pour regrouper plusieurs effets réactifs complexes dans une même portée.
Lorsque vous travaillez avec des API externes (ex. : setInterval, fetch) pour centraliser le nettoyage.
Dans des composables pour éviter les fuites de mémoire.
Pour regrouper plusieurs effets réactifs complexes dans une même portée.
Lorsque vous travaillez avec des API externes (ex. : setInterval, fetch) pour centraliser le nettoyage.
import { getCurrentScope, onScopeDispose } from 'vue';
if (getCurrentScope()) {
onScopeDispose(() => console.log("Scope nettoyé !"));
}
Pourquoi ? Cela permet d’écrire des composables qui ne dépendent pas d’un composant parent pour le nettoyage.
if (getCurrentScope()) {
onScopeDispose(() => console.log("Scope nettoyé !"));
}
Pourquoi ? Cela permet d’écrire des composables qui ne dépendent pas d’un composant parent pour le nettoyage.
December 17, 2024 at 5:18 PM
import { getCurrentScope, onScopeDispose } from 'vue';
if (getCurrentScope()) {
onScopeDispose(() => console.log("Scope nettoyé !"));
}
Pourquoi ? Cela permet d’écrire des composables qui ne dépendent pas d’un composant parent pour le nettoyage.
if (getCurrentScope()) {
onScopeDispose(() => console.log("Scope nettoyé !"));
}
Pourquoi ? Cela permet d’écrire des composables qui ne dépendent pas d’un composant parent pour le nettoyage.
4️⃣ getCurrentScope : Un outil complémentaire
getCurrentScope vous permet de vérifier si vous êtes dans une portée active (scope). Utile pour conditionner l’ajout d’effets.
getCurrentScope vous permet de vérifier si vous êtes dans une portée active (scope). Utile pour conditionner l’ajout d’effets.
December 17, 2024 at 5:17 PM
4️⃣ getCurrentScope : Un outil complémentaire
getCurrentScope vous permet de vérifier si vous êtes dans une portée active (scope). Utile pour conditionner l’ajout d’effets.
getCurrentScope vous permet de vérifier si vous êtes dans une portée active (scope). Utile pour conditionner l’ajout d’effets.
👉 Ici, scope.stop() est appelé lorsque le composant est démonté, nettoyant automatiquement les effets comme les setInterval.
December 17, 2024 at 5:17 PM
👉 Ici, scope.stop() est appelé lorsque le composant est démonté, nettoyant automatiquement les effets comme les setInterval.
👉 Ici, scope.stop() est appelé lorsque le composant est démonté, nettoyant automatiquement les effets comme les setInterval.
December 17, 2024 at 5:17 PM
👉 Ici, scope.stop() est appelé lorsque le composant est démonté, nettoyant automatiquement les effets comme les setInterval.
import { effectScope, ref, onScopeDispose } from 'vue';
export function useScopedCounter() {
const scope = effectScope();
const count = ref(0);
scope.run(() => {
setInterval(() => count.value++, 1000);
});
// Nettoyage auto
onScopeDispose(() => scope.stop());
return { count };
}
December 17, 2024 at 5:16 PM
import { effectScope, ref, onScopeDispose } from 'vue';
export function useScopedCounter() {
const scope = effectScope();
const count = ref(0);
scope.run(() => {
setInterval(() => count.value++, 1000);
});
// Nettoyage auto
onScopeDispose(() => scope.stop());
return { count };
}
3️⃣ Utilisation dans les composables
effectScope est particulièrement utile dans les composables pour éviter des effets qui continuent de vivre après le démontage d'un composant.
effectScope est particulièrement utile dans les composables pour éviter des effets qui continuent de vivre après le démontage d'un composant.
December 17, 2024 at 5:14 PM
3️⃣ Utilisation dans les composables
effectScope est particulièrement utile dans les composables pour éviter des effets qui continuent de vivre après le démontage d'un composant.
effectScope est particulièrement utile dans les composables pour éviter des effets qui continuent de vivre après le démontage d'un composant.
Lorsque scope.stop() est appelé, tous les watchers et effets sont nettoyés. ✅
December 17, 2024 at 5:07 PM
Lorsque scope.stop() est appelé, tous les watchers et effets sont nettoyés. ✅
2️⃣ Création d’un effectScope
import { effectScope, ref, watch } from 'vue';
const scope = effectScope();
scope.run(() => {
const count = ref(0);
watch(count, (newVal) => console.log("Count:", newVal));
count.value++;
});
Résultat : Les effets sont contenus dans scope.
import { effectScope, ref, watch } from 'vue';
const scope = effectScope();
scope.run(() => {
const count = ref(0);
watch(count, (newVal) => console.log("Count:", newVal));
count.value++;
});
Résultat : Les effets sont contenus dans scope.
December 17, 2024 at 5:07 PM
2️⃣ Création d’un effectScope
import { effectScope, ref, watch } from 'vue';
const scope = effectScope();
scope.run(() => {
const count = ref(0);
watch(count, (newVal) => console.log("Count:", newVal));
count.value++;
});
Résultat : Les effets sont contenus dans scope.
import { effectScope, ref, watch } from 'vue';
const scope = effectScope();
scope.run(() => {
const count = ref(0);
watch(count, (newVal) => console.log("Count:", newVal));
count.value++;
});
Résultat : Les effets sont contenus dans scope.
1️⃣ C’est quoi un effectScope ?
effectScope permet de regrouper des effets réactifs (comme des watch, computed, ou ref) dans un espace isolé. Cela facilite :
Le nettoyage des réactivités.
L’évitement des fuites de mémoire.
👉 Parfait pour des composables complexes ou des effets globaux temporaires.
effectScope permet de regrouper des effets réactifs (comme des watch, computed, ou ref) dans un espace isolé. Cela facilite :
Le nettoyage des réactivités.
L’évitement des fuites de mémoire.
👉 Parfait pour des composables complexes ou des effets globaux temporaires.
December 17, 2024 at 5:05 PM
1️⃣ C’est quoi un effectScope ?
effectScope permet de regrouper des effets réactifs (comme des watch, computed, ou ref) dans un espace isolé. Cela facilite :
Le nettoyage des réactivités.
L’évitement des fuites de mémoire.
👉 Parfait pour des composables complexes ou des effets globaux temporaires.
effectScope permet de regrouper des effets réactifs (comme des watch, computed, ou ref) dans un espace isolé. Cela facilite :
Le nettoyage des réactivités.
L’évitement des fuites de mémoire.
👉 Parfait pour des composables complexes ou des effets globaux temporaires.
🎯 Résumé :
Suspense facilite le rendu différé pour des composants ou données asynchrones.
Associez-le à defineAsyncComponent pour charger des composants dynamiques.
Divisez votre appli en plusieurs Suspense pour garder une UI réactive et rapide.
Prêt à essayer ? 🚀
#VueJS #DéveloppementWeb #Suspense
Suspense facilite le rendu différé pour des composants ou données asynchrones.
Associez-le à defineAsyncComponent pour charger des composants dynamiques.
Divisez votre appli en plusieurs Suspense pour garder une UI réactive et rapide.
Prêt à essayer ? 🚀
#VueJS #DéveloppementWeb #Suspense
December 15, 2024 at 11:39 AM
🎯 Résumé :
Suspense facilite le rendu différé pour des composants ou données asynchrones.
Associez-le à defineAsyncComponent pour charger des composants dynamiques.
Divisez votre appli en plusieurs Suspense pour garder une UI réactive et rapide.
Prêt à essayer ? 🚀
#VueJS #DéveloppementWeb #Suspense
Suspense facilite le rendu différé pour des composants ou données asynchrones.
Associez-le à defineAsyncComponent pour charger des composants dynamiques.
Divisez votre appli en plusieurs Suspense pour garder une UI réactive et rapide.
Prêt à essayer ? 🚀
#VueJS #DéveloppementWeb #Suspense
Fournissez des fallbacks clairs et utiles : Une bonne UI de chargement améliore l'expérience utilisateur.
Gérez les erreurs : Utilisez une combinaison de try-catch et de slots conditionnels pour afficher des messages en cas d'échec.
Gérez les erreurs : Utilisez une combinaison de try-catch et de slots conditionnels pour afficher des messages en cas d'échec.
December 15, 2024 at 11:38 AM
Fournissez des fallbacks clairs et utiles : Une bonne UI de chargement améliore l'expérience utilisateur.
Gérez les erreurs : Utilisez une combinaison de try-catch et de slots conditionnels pour afficher des messages en cas d'échec.
Gérez les erreurs : Utilisez une combinaison de try-catch et de slots conditionnels pour afficher des messages en cas d'échec.
5️⃣ Bonnes pratiques avec Suspense
Chargez uniquement ce qui est nécessaire : Ne mettez pas tout dans un seul Suspense. Divisez les sections de votre UI.
Chargez uniquement ce qui est nécessaire : Ne mettez pas tout dans un seul Suspense. Divisez les sections de votre UI.
December 15, 2024 at 11:37 AM
5️⃣ Bonnes pratiques avec Suspense
Chargez uniquement ce qui est nécessaire : Ne mettez pas tout dans un seul Suspense. Divisez les sections de votre UI.
Chargez uniquement ce qui est nécessaire : Ne mettez pas tout dans un seul Suspense. Divisez les sections de votre UI.
#default>
#fallback>
Chargement de tout...
👉 Pour charger plusieurs sections de votre page en mm tps.
December 15, 2024 at 11:36 AM
#default>
#fallback>
Chargement de tout...
👉 Pour charger plusieurs sections de votre page en mm tps.
4️⃣ Gestion avancée avec plusieurs composants asynchrones
Suspense peut gérer plusieurs enfants asynchrones. Il attend que toutes les promesses soient résolues avant d’afficher le contenu.
Suspense peut gérer plusieurs enfants asynchrones. Il attend que toutes les promesses soient résolues avant d’afficher le contenu.
December 15, 2024 at 11:35 AM
4️⃣ Gestion avancée avec plusieurs composants asynchrones
Suspense peut gérer plusieurs enfants asynchrones. Il attend que toutes les promesses soient résolues avant d’afficher le contenu.
Suspense peut gérer plusieurs enfants asynchrones. Il attend que toutes les promesses soient résolues avant d’afficher le contenu.
👉 Combinez ce composant avec Suspense pour gérer le chargement de manière fluide.
December 15, 2024 at 11:34 AM
👉 Combinez ce composant avec Suspense pour gérer le chargement de manière fluide.
3️⃣ Rendre des composants asynchrones avec defineAsyncComponent
Pour utiliser Suspense, créez un composant asynchrone avec defineAsyncComponent :
import { defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent(() =>
import('./MyAsyncComponent.vue')
);
Pour utiliser Suspense, créez un composant asynchrone avec defineAsyncComponent :
import { defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent(() =>
import('./MyAsyncComponent.vue')
);
December 15, 2024 at 11:34 AM
3️⃣ Rendre des composants asynchrones avec defineAsyncComponent
Pour utiliser Suspense, créez un composant asynchrone avec defineAsyncComponent :
import { defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent(() =>
import('./MyAsyncComponent.vue')
);
Pour utiliser Suspense, créez un composant asynchrone avec defineAsyncComponent :
import { defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent(() =>
import('./MyAsyncComponent.vue')
);
#default>
#fallback>
Chargement...
December 15, 2024 at 11:33 AM
#default>
#fallback>
Chargement...