Compétences vue-debug-guides

📦

vue-debug-guides

Name: vue-debug-guides
Author: vuejs-ai

Sûr

Guide de débogage Vue 3

Également disponible depuis: hyf0

Les applications Vue 3 rencontrent des erreurs d'exécution, des messages d'avertissement, des échecs asynchrones et des problèmes d'hydratation SSR difficiles à déboguer. Cette compétence fournit des guides de débogage complets et des solutions pour plus de 100 problèmes courants de développement Vue 3.

Prend en charge: Claude Codex Code(CC)

🥉 74 Bronze

Télécharger le ZIP du skill

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

Activez et commencez à utiliser

Tester

Utilisation de "vue-debug-guides". Pourquoi ma propriété computed ne se met-elle pas à jour ?

Résultat attendu:

Il s'agit probablement d'un problème de dépendance de propriété computed. Les propriétés computed dans Vue 3 suivent uniquement les dépendances réactives accédées pendant leur fonction getter. Si vous déstructurez un objet réactif ou accédez à des propriétés imbriquées après une condition, la propriété computed peut ne pas se mettre à jour. Consultez le guide 'computed-conditional-dependencies' pour des solutions.

Utilisation de "vue-debug-guides". Comment corriger l'incohérence d'hydratation dans Vue SSR ?

Résultat attendu:

Les incohérences d'hydratation se produisent lorsque le serveur et le client rendent un contenu différent. Les causes courantes incluent : 1) Utiliser des API spécifiques au navigateur comme localStorage ou window, 2) Des valeurs aléatoires générées pendant le rendu, 3) Le CSS provoquant des différences de mise en page. Utilisez onMounted pour les API navigateur, initialisez les générateurs aléatoires avec une graine, et utilisez des composants ClientOnly pour le contenu dynamique.

Utilisation de "vue-debug-guides". Pourquoi mes refs de template sont-elles undefined ?

Résultat attendu:

Les refs de template sont uniquement disponibles après le montage du composant. Si vous essayez d'y accéder dans setup(), elles seront undefined. Utilisez le hook de cycle de vie onMounted ou watchEffect avec flush: 'post' pour vous assurer que les refs sont peuplées. Vérifiez également si l'él��ment est rendu conditionnellement avec v-if - les refs vers des éléments v-if seront null lorsque la condition est fausse.

Audit de sécurité

Sûr

v1 • 2/16/2026

This skill contains Vue.js debugging guides as markdown documentation. Static analysis flagged patterns in code examples within documentation. All findings are FALSE POSITIVES - backticks are markdown code formatting, URLs are documentation examples, and code snippets showing problematic patterns are educational content, not vulnerabilities. Safe for publication.

140

Fichiers analysés

22,211

Lignes analysées

résultats

Total des audits

Aucun problème de sécurité trouvé

Audité par: claude

Score de qualité

Architecture

100

Maintenabilité

Contenu

Communauté

100

Sécurité

Conformité aux spécifications

Ce que vous pouvez construire

Déboguer les problèmes de réactivité

Lorsque les composants Vue cessent de se mettre à jour de manière inattendue en raison de problèmes de référence réactive, d'erreurs de déstructuration ou de problèmes de propriétés calculées

Corriger les erreurs d'hydratation SSR

Lorsque les applications Vue rendues côté serveur affichent des avertissements d'incohérence d'hydratation ou des différences de contenu client-serveur

Résoudre les échecs de composants asynchrones

Lorsque les composants chargés de manière différée échouent à se charger, affichent incorrectement des erreurs ou provoquent des fuites de mémoire dans les applications Vue

Essayez ces prompts

Déboguer un problème de réactivité Vue

Mon composant Vue 3 ne se met pas à jour lorsque je change les données. La valeur ref change mais le template ne se re-rend pas. Comment déboguer cela ?

Corriger l'incohérence d'hydratation

Je reçois des avertissements d'incohérence d'hydratation dans mon application Nuxt. Le HTML serveur ne correspond pas au client. Comment corriger cela ?

Résoudre un watcher qui ne se déclenche pas

Mon watcher ne se déclenche pas lorsqu'une propriété imbriquée change dans un objet réactif. J'utilise deep: true mais le callback ne se déclenche jamais avec les anciennes et nouvelles valeurs.

Déboguer une fuite de mémoire de composant asynchrone

J'utilise KeepAlive avec des composants asynchrones et mon application montre des fuites de mémoire. Le hook mounted s'exécute plusieurs fois mais unmounted ne se déclenche jamais. Comment corriger cela ?

Bonnes pratiques

Utiliser Vue DevTools pour inspecter l'état du composant, les props et les événements émis en temps réel
Activer le mode strict de Vue pendant le développement pour détecter les problèmes de réactivité tôt
Toujours déclarer les emits explicitement pour éviter le déclenchement accidentel d'événements en double

Éviter

Déstructurer directement des objets réactifs - cela brise la réactivité et doit utiliser toRefs ou toRaw
Utiliser v-for sans :key - provoque des problèmes de rendu et un comportement imprévisible
Définir les emits uniquement à l'exécution sans déclarations basées sur les types - perd la sécurité de type

Foire aux questions

Cette compétence fonctionne-t-elle avec Vue 2 ?

Non, cette compétence se concentre spécifiquement sur le débogage de Vue 3. Vue 2 a des API et des patterns différents qui nécessitent des guides séparés.

Cette compétence peut-elle aider avec les problèmes de performance ?

Oui, la compétence inclut des guides pour les problèmes de performance comme les re-rendus inutiles, la stabilité des props et la stabilité des objets computed.

Cela couvre-t-il les problèmes spécifiques à Nuxt ?

Oui, il existe des guides pour les incohérences d'hydratation SSR et les problèmes de rendu côté serveur qui s'appliquent aux applications Nuxt.

Comment déboguer un état réactif qui ne se met pas à jour ?

Utilisez Vue DevTools pour vérifier que les données réactives changent réellement. Vérifiez les problèmes courants comme la déstructuration d'objets réactifs, l'utilisation du mauvais type de ref, ou les propriétés computed avec des dépendances conditionnelles.

Cela peut-il aider avec les erreurs TypeScript dans Vue ?

Oui, il existe des guides spécifiques pour les problèmes TypeScript comme les limitations des types importés defineProps, la gestion des refs de template nulles, et les arguments génériques réactifs.

Comment déboguer les échecs de chargement de composants asynchrones ?

Vérifiez les slots loading et error de defineAsyncComponent. Assurez-vous que la gestion d'erreurs est en place et envisagez d'utiliser Suspense pour une gestion plus propre des composants asynchrones.