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

vue-debug-guides

آمن

Guía de Depuración de Vue 3

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

Las aplicaciones Vue 3 encuentran errores de runtime, mensajes de advertencia, fallos asíncronos y problemas de hidratación SSR que son difíciles de depurar. Esta habilidad proporciona guías completas de depuración y soluciones para más de 100 problemas comunes de desarrollo de Vue 3.

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

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

2

رفع في Claude

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

3

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

اختبرها

استخدام "vue-debug-guides". Why is my computed property not updating?

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

This is likely a computed property dependency issue. Computed properties in Vue 3 only track reactive dependencies accessed during their getter function. If you are destructuring a reactive object or accessing nested properties after a conditional, the computed may not update. See the 'computed-conditional-dependencies' guide for solutions.

استخدام "vue-debug-guides". How do I fix hydration mismatch in Vue SSR?

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

Hydration mismatches occur when server and client render different content. Common causes include: 1) Using browser-only APIs like localStorage or window, 2) Random values generated during render, 3) CSS causing layout differences. Use onMounted for browser APIs, seed random generators, and use ClientOnly components for dynamic content.

استخدام "vue-debug-guides". Why are my template refs undefined?

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

Template refs are only available after the component mounts. If you try to access them in setup(), they will be undefined. Use onMounted lifecycle hook or watchEffect with flush: 'post' to ensure refs are populated. Also check if the element is conditionally rendered with v-if - refs to v-if elements will be null when the condition is false.

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

آمن
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
الامتثال للمواصفات

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

Depurar Problemas de Reactividad

Cuando los componentes Vue dejan de actualizarse inesperadamente debido a problemas de referencias reactivas, errores de destructuring o problemas de propiedades computadas

Corregir Errores de Hidratación SSR

Cuando las aplicaciones Vue renderizadas del lado del servidor muestran advertencias de hidratación incorrecta o diferencias de contenido entre cliente y servidor

Resolver Fallos de Componentes Asíncronos

Cuando los componentes de carga diferida fallan al cargar, muestran errores incorrectamente o causan fugas de memoria en aplicaciones Vue

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

Depurar Problema de Reactividad Vue 
My Vue 3 component is not updating when I change the data. The ref value changes but the template does not re-render. How do I debug this?
Corregir Desajuste de Hidratación 
I am getting hydration mismatch warnings in my Nuxt application. The server HTML does not match the client. How do I fix this?
Resolver Watcher No Dispara 
My watcher is not triggering when a nested property changes in a reactive object. I am using deep: true but the callback never fires with the old and new values.
Depurar Fuga de Memoria de Componente Asíncrono 
I am using KeepAlive with async components and my application is showing memory leaks. The mounted hook runs multiple times but unmounted never fires. How do I fix this?

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

  • Usa Vue DevTools para inspeccionar el estado de los componentes, props y eventos emitidos en tiempo real
  • Habilita el modo estricto de Vue durante el desarrollo para detectar problemas de reactividad tempranamente
  • Declara siempre los emits explícitamente para evitar la duplicación accidental de eventos

تجنب

  • Destructuring de objetos reactivos directamente - esto rompe la reactividad y debe usar toRefs o toRaw
  • Usar v-for sin :key - causa problemas de renderizado y comportamiento impredecible
  • Definir emits solo en runtime sin declaraciones basadas en tipos - pierde seguridad de tipos

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

¿Esta habilidad funciona con Vue 2?
No, esta habilidad se enfoca específicamente en depuración de Vue 3. Vue 2 tiene diferentes APIs y patrones que requieren guías separadas.
¿Esta habilidad puede ayudar con problemas de rendimiento?
Sí, la habilidad incluye guías para problemas de rendimiento como re-renderizados innecesarios, estabilidad de props y estabilidad de objetos computados.
¿Esto cubre problemas específicos de Nuxt?
Sí, hay guías para desajustes de hidratación SSR y problemas de renderizado del lado del servidor que se aplican a aplicaciones Nuxt.
¿Cómo depuro el estado reactivo que no se actualiza?
Usa Vue DevTools para verificar que los datos reactivos realmente están cambiando. Busca problemas comunes como destructuring de objetos reactivos, usar el tipo incorrecto de ref, o propiedades computadas con dependencias condicionales.
¿Esto puede ayudar con errores de TypeScript en Vue?
Sí, hay guías específicas para problemas de TypeScript como limitaciones de tipos importados con defineProps, manejo de nulos en template refs, y argumentos genéricos de reactive.
¿Cómo depuro fallos de carga de componentes asíncronos?
Revisa los slots de loading y error de defineAsyncComponent. Asegúrate de que el manejo de errores esté implementado y considera usar Suspense para una gestión más limpia de componentes asíncronos.

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

المؤلف

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