المهارات vue-debug-guides
📦

vue-debug-guides

آمن

Vue 3 Debugging-Leitfaden

متاح أيضًا من: hyf0

Vue 3-Anwendungen weisen Laufzeitfehler, Warnmeldungen, Async-Fehler und SSR-Hydratisierungsprobleme auf, die schwer zu debuggen sind. Dieser Skill bietet umfassende Debugging-Leitfäden und Lösungen für über 100 häufige Vue 3-Entwicklungsprobleme.

يدعم: Claude Codex Code(CC)
🥉 74 برونزي
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "vue-debug-guides". Warum wird meine computed-Eigenschaft nicht aktualisiert?

النتيجة المتوقعة:

Dies ist wahrscheinlich ein computed-Eigenschaft-Abhängigkeitsproblem. Computed-Eigenschaften in Vue 3 verfolgen nur reaktive Abhängigkeiten, auf die während ihrer Getter-Funktion zugegriffen wird. Wenn Sie ein reactive-Objekt destruktuieren oder nach einer Bedingung auf verschachtelte Eigenschaften zugreifen, wird die Computed möglicherweise nicht aktualisiert. Siehe den Leitfaden 'computed-conditional-dependencies' für Lösungen.

استخدام "vue-debug-guides". Wie behebe ich Hydratisierungs-Mismatch in Vue SSR?

النتيجة المتوقعة:

Hydratisierungs-Mismatches treten auf, wenn Server und Client unterschiedliche Inhalte rendern. Häufige Ursachen sind: 1) Verwendung von nur im Browser verfügbaren APIs wie localStorage oder window, 2) Zufallswerte, die während des Renderings generiert werden, 3) CSS, das Layoutunterschiede verursacht. Verwenden Sie onMounted für Browser-APIs, seeden Sie Zufallsgeneratoren und verwenden Sie ClientOnly-Komponenten für dynamische Inhalte.

استخدام "vue-debug-guides". Warum sind meine Template-Refs undefiniert?

النتيجة المتوقعة:

Template-Refs sind erst nach dem Einhängen der Komponente verfügbar. Wenn Sie in setup() darauf zugreifen, sind sie undefiniert. Verwenden Sie den onMounted-Lifecycle-Hook oder watchEffect mit flush: 'post', um sicherzustellen, dass die Refs gefüllt sind. Überprüfen Sie auch, ob das Element bedingt mit v-if gerendert wird - Refs auf v-if-Elemente sind null, wenn die Bedingung falsch ist.

التدقيق الأمني

آمن
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
الملفات التي تم فحصها
22,211
الأسطر التي تم تحليلها
0
النتائج
1
إجمالي عمليات التدقيق
لا توجد مشكلات أمنية
تم تدقيقه بواسطة: claude

درجة الجودة

38
الهندسة المعمارية
100
قابلية الصيانة
87
المحتوى
50
المجتمع
100
الأمان
91
الامتثال للمواصفات

ماذا يمكنك بناءه

Reaktivitätsprobleme debuggen

Wenn Vue-Komponenten aufgrund von Reaktivitätsreferenzproblemen, Destrukturierungsfehlern oder computed-Eigenschaftsproblemen unerwartet aufhören sich zu aktualisieren

SSR-Hydratisierungsfehler beheben

Wenn serverseitig gerenderte Vue-Anwendungen Hydratisierungs-Warnmismatches oder Client-Server-Inhaltsunterschiede anzeigen

Async-Komponentenfehler beheben

Wenn Lazy-Komponenten nicht laden, Fehler falsch anzeigen oder Speicherlecks in Vue-Anwendungen verursachen

جرّب هذه الموجهات

Vue-Reaktivitätsproblem debuggen 
Meine Vue 3-Komponente wird nicht aktualisiert, wenn ich die Daten ändere. Der ref-Wert ändert sich aber das Template wird nicht neu gerendert. Wie debugge ich das?
Hydratisierungs-Mismatch beheben 
Ich erhalte Hydratisierungs-Mismatch-Warnungen in meiner Nuxt-Anwendung. Das Server-HTML stimmt nicht mit dem Client überein. Wie behebe ich das?
Watcher-Auslösung beheben 
Mein Watcher wird nicht ausgelöst, wenn sich eine verschachtelte Eigenschaft in einem reactive-Objekt ändere. Ich verwende deep: true aber der Callback wird nie mit den alten und neuen Werten ausgelöst.
Async-Komponenten-Speicherleck debuggen 
Ich verwende KeepAlive mit async-Komponenten und meine Anwendung zeigt Speicherleaks. Der mounted-Hook läuft mehrere Male aber unmounted wird nie ausgelöst. Wie behebe ich das?

أفضل الممارسات

  • Verwenden Sie Vue DevTools, um Komponentenstatus, Props und ausgegebene Ereignisse in Echtzeit zu überprüfen
  • Aktivieren Sie Vue's Strict-Modus während der Entwicklung, um Reaktivitätsprobleme frühzeitig zu erkennen
  • Deklarieren Sie emits immer explizit, um versehentliches doppeltes Ereignisauslösen zu vermeiden

تجنب

  • Reaktive Objekte direkt destruktuieren - dies bricht die Reaktivität und muss toRefs oder toRaw verwenden
  • Verwenden von v-for ohne :key - verursacht Rendering-Probleme und unvorhersehbares Verhalten
  • Deklarieren von emits nur zur Laufzeit ohne typbasierte Deklarationen - geht Typsicherheit verloren

الأسئلة المتكررة

Funktioniert dieser Skill mit Vue 2?
Nein, dieser Skill konzentriert sich speziell auf Vue 3-Debugging. Vue 2 hat verschiedene APIs und Muster, die separate Leitfäden erfordern.
Kann dieser Skill bei Leistungsproblemen helfen?
Ja, der Skill enthält Leitfäden für Leistungsprobleme wie unnötige Re-Renders, Props-Stabilität und Computed-Objekt-Stabilität.
Deckt das Nuxt-spezifische Probleme ab?
Ja, es gibt Leitfäden für SSR-Hydratisierungs-Mismatches und serverseitige Rendering-Probleme, die für Nuxt-Anwendungen gelten.
Wie debugge ich reaktive Zustände, die nicht aktualisiert werden?
Verwenden Sie Vue DevTools, um zu überprüfen, ob sich die reaktiven Daten tatsächlich ändern. Überprüfen Sie häufige Probleme wie Destrukturierung von reaktiven Objekten, Verwendung des falschen Ref-Typs oder computed-Eigenschaften mit bedingten Abhängigkeiten.
Kann das bei TypeScript-Fehlern in Vue helfen?
Ja, es gibt spezifische Leitfäden für TypeScript-Probleme wie defineProps importierte Typ-Einschränkungen, Template-Ref-Null-Handhabung und reaktive generische Argumente.
Wie debugge ich Async-Komponenten-Ladefehler?
Überprüfen Sie die Lade- und Fehler-Slots von defineAsyncComponent. Stellen Sie sicher, dass Fehlerbehandlung vorhanden ist und erwägen Sie die Verwendung von Suspense für eine sauberere Async-Komponentenverwaltung.

تفاصيل المطور

المؤلف

vuejs-ai

الترخيص

MIT

المستودع

https://github.com/vuejs-ai/skills/tree/main/skills/vue-debug-guides/

مرجع

main

بنية الملفات

📁 reference/

📄 animation-key-for-rerender.md

📄 animation-transitiongroup-performance.md

📄 async-component-error-handling.md

📄 async-component-keepalive-ref-issue.md

📄 async-component-suspense-control.md

📄 async-component-vue-router.md

📄 attrs-event-listener-merging.md

📄 checkbox-true-false-value-form-submission.md

📄 cleanup-side-effects.md

📄 click-events-on-components.md

📄 component-naming-conflicts.md

📄 component-ref-requires-defineexpose.md

📄 composable-avoid-hidden-side-effects.md

📄 composable-call-location-restrictions.md

📄 composable-naming-return-pattern.md

📄 composable-tovalue-inside-watcheffect.md

📄 composition-api-not-functional-programming.md

📄 composition-api-script-setup-async-context.md

📄 composition-api-vs-react-hooks-differences.md

📄 computed-array-mutation.md

📄 computed-conditional-dependencies.md

📄 computed-no-parameters.md

📄 computed-no-side-effects.md

📄 computed-return-value-readonly.md

📄 configure-app-before-mount.md

📄 declare-emits-for-documentation.md

📄 define-expose-before-await.md

📄 define-model-default-value-sync.md

📄 defineEmits-must-be-top-level.md

📄 defineEmits-no-runtime-and-type-mixed.md

📄 definemodel-object-mutation-no-emit.md

📄 dom-update-timing-nexttick.md

📄 dynamic-argument-constraints.md

📄 dynamic-component-registration-vite.md

📄 event-modifier-order-matters.md

📄 exact-modifier-for-precise-shortcuts.md

📄 fallthrough-attrs-overwrite-vue3.md

📄 in-dom-template-parsing-caveats.md

📄 inheritattrs-false-for-wrapper-components.md

📄 keepalive-router-nested-double-mount.md

📄 keepalive-transition-memory-leak.md

📄 keyup-modifier-timing.md

📄 lifecycle-dom-access-timing.md

📄 lifecycle-hooks-synchronous-registration.md

📄 lifecycle-ssr-awareness.md

📄 local-components-not-in-descendants.md

📄 mount-return-value.md

📄 multi-root-component-class-attrs.md

📄 native-event-collision-with-emits.md

📄 no-passive-with-prevent.md

📄 no-v-if-with-v-for.md

📄 perf-computed-object-stability.md

📄 perf-props-stability-update-optimization.md

📄 plugin-global-properties-sparingly.md

📄 plugin-install-before-mount.md

📄 plugin-prefer-provide-inject-over-global-properties.md

📄 plugin-typescript-type-augmentation.md

📄 prop-defineprops-scope-limitation.md

📄 provide-inject-debugging-challenges.md

📄 provide-inject-default-value-factory.md

📄 provide-inject-reactivity-not-automatic.md

📄 provide-inject-synchronous-setup.md

📄 reactive-destructuring.md

📄 reactivity-debugging-hooks.md

📄 reactivity-markraw-for-non-reactive.md

📄 reactivity-proxy-identity-hazard.md

📄 reactivity-same-tick-batching.md

📄 ref-value-access.md

📄 refs-in-collections-need-value.md

📄 render-function-avoid-internal-vnode-properties.md

📄 render-function-vnodes-must-be-unique.md

📄 rendering-render-function-h-import-vue3.md

📄 rendering-render-function-return-from-setup.md

📄 rendering-render-function-slots-as-functions.md

📄 rendering-resolve-component-for-string-names.md

📄 select-initial-value-ios-bug.md

📄 self-referencing-component-name.md

📄 sfc-named-exports-forbidden.md

📄 sfc-scoped-css-child-component-styling.md

📄 sfc-scoped-css-dynamic-content.md

📄 sfc-scoped-css-slot-content.md

📄 sfc-script-setup-reactivity.md

📄 slot-forwarding-to-child-components.md

📄 slot-implicit-default-content.md

📄 slot-name-reserved-prop.md

📄 slot-named-scoped-explicit-default.md

📄 slot-render-scope-parent-only.md

📄 slot-v-slot-on-components-or-templates-only.md

📄 ssr-hydration-mismatch-causes.md

📄 ssr-platform-specific-apis.md

📄 state-ssr-cross-request-pollution.md

📄 suspense-no-builtin-error-handling.md

📄 suspense-ssr-hydration-issues.md

📄 tailwind-dynamic-class-generation.md

📄 teleport-scoped-styles-limitation.md

📄 teleport-ssr-hydration.md

📄 teleport-target-must-exist.md

📄 template-expressions-restrictions.md

📄 template-functions-no-side-effects.md

📄 template-ref-null-with-v-if.md

📄 template-ref-unwrapping-top-level.md

📄 template-ref-v-for-order.md

📄 textarea-no-interpolation.md

📄 transition-group-flip-inline-elements.md

📄 transition-group-move-animation-position-absolute.md

📄 transition-group-no-default-wrapper-vue3.md

📄 transition-js-hooks-done-callback.md

📄 transition-nested-duration.md

📄 transition-reusable-scoped-style.md

📄 transition-router-view-appear.md

📄 transition-type-when-mixed.md

📄 transition-unmount-hook-timing.md

📄 ts-defineprops-boolean-default-false.md

📄 ts-defineprops-imported-types-limitations.md

📄 ts-event-handler-explicit-typing.md

📄 ts-reactive-no-generic-argument.md

📄 ts-shallowref-for-dynamic-components.md

📄 ts-template-ref-null-handling.md

📄 ts-template-type-casting.md

📄 ts-withdefaults-mutable-factory-function.md

📄 undeclared-emits-double-firing.md

📄 use-template-ref-vue35.md

📄 v-else-must-follow-v-if.md

📄 v-for-component-props.md

📄 v-for-computed-reverse-sort.md

📄 v-for-key-attribute.md

📄 v-for-range-starts-at-one.md

📄 v-if-null-check-order.md

📄 v-model-ignores-html-attributes.md

📄 v-model-ime-composition.md

📄 v-model-number-modifier-behavior.md

📄 v-show-template-limitation.md

📄 watch-async-cleanup.md

📄 watch-async-creation-memory-leak.md

📄 watch-deep-same-object-reference.md

📄 watch-flush-timing.md

📄 watch-reactive-property-getter.md

📄 watcheffect-async-dependency-tracking.md

📄 watcheffect-flush-post-for-refs.md

📄 SKILL.md