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

vue-debug-guides

آمن

Guia de Depuração Vue 3

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

Aplicações Vue 3 encontram erros de tempo de execução, mensagens de aviso, falhas assíncronas e problemas de hidratação SSR que são difíceis de depurar. Esta skill fornece guias abrangentes de depuração e soluções para mais de 100 problemas comuns de desenvolvimento Vue 3.

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

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

2

رفع في Claude

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

3

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

اختبرها

استخدام "vue-debug-guides". Por que minha computed property não está atualizando?

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

Isso é provavelmente um problema de dependência de computed property. Computed properties no Vue 3 apenas rastreiam dependências reativas acessadas durante sua função getter. Se você está desestruturando um objeto reactive ou acessando propriedades aninhadas após uma condicional, a computed pode não atualizar. Veja o guia 'computed-conditional-dependencies' para soluções.

استخدام "vue-debug-guides". Como faço para corrigir incompatibilidade de hidratação no Vue SSR?

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

Incompatibilidades de hidratação ocorrem quando servidor e cliente renderizam conteúdo diferente. Causas comuns incluem: 1) Usar APIs apenas de navegador como localStorage ou window, 2) Valores aleatórios gerados durante a renderização, 3) CSS causando diferenças de layout. Use onMounted para APIs de navegador, semeie geradores aleatórios e use componentes ClientOnly para conteúdo dinâmico.

استخدام "vue-debug-guides". Por que meus template refs estão undefined?

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

Template refs estão disponíveis apenas após o componente montar. Se você tentar acessá-los no setup(), eles estarão undefined. Use o lifecycle hook onMounted ou watchEffect com flush: 'post' para garantir que os refs estejam populados. Também verifique se o elemento está condicionalmente renderizado com v-if - refs para elementos v-if serão null quando a condição for 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 Reatividade

Quando componentes Vue param de atualizar inesperadamente devido a problemas de referência reativa, erros de destructuring ou problemas de computed property

Corrigir Erros de Hidratação SSR

Quando aplicações Vue renderizadas no servidor mostram avisos de incompatibilidade de hidratação ou diferenças de conteúdo cliente-servidor

Resolver Falhas de Componentes Assíncronos

Quando componentes carregados de forma lazy falham ao carregar, mostram erros incorretamente ou causam vazamentos de memória em aplicações Vue

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

Depurar Problema de Reatividade Vue 
Meu componente Vue 3 não está atualizando quando eu altero os dados. O valor ref muda mas o template não re-renderiza. Como faço para depurar isso?
Corrigir Incompatibilidade de Hidratação 
Estou recebendo avisos de incompatibilidade de hidratação na minha aplicação Nuxt. O HTML do servidor não corresponde ao do cliente. Como faço para corrigir isso?
Resolver Watcher Não Disparando 
Meu watcher não está disparando quando uma propriedade aninhada muda em um objeto reactive. Estou usando deep: true mas o callback nunca dispara com os valores antigo e novo.
Depurar Vazamento de Memória em Componente Assíncrono 
Estou usando KeepAlive com componentes assíncronos e minha aplicação está mostrando vazamentos de memória. O hook mounted executa múltiplas vezes mas unmounted nunca dispara. Como faço para corrigir isso?

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

  • Use Vue DevTools para inspecionar estado do componente, props e eventos emitidos em tempo real
  • Ative o strict mode do Vue durante o desenvolvimento para detectar problemas de reatividade cedo
  • Sempre declare emits explicitamente para evitar disparo acidental de eventos duplicados

تجنب

  • Desestruturar objetos reactive diretamente - isso quebra a reatividade e deve usar toRefs ou toRaw
  • Usar v-for sem :key - causa problemas de renderização e comportamento imprevisível
  • Definir emits apenas em runtime sem declarações baseadas em tipo - perde segurança de tipo

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

Esta skill funciona com Vue 2?
Não, esta skill foca especificamente em depuração Vue 3. Vue 2 tem APIs e padrões diferentes que requerem guias separados.
Esta skill pode ajudar com problemas de performance?
Sim, a skill inclui guias para problemas de performance como re-renderizações desnecessárias, estabilidade de props e estabilidade de objetos computed.
Isso cobre problemas específicos do Nuxt?
Sim, existem guias para incompatibilidades de hidratação SSR e problemas de renderização no servidor que se aplicam a aplicações Nuxt.
Como faço para depurar estado reativo não atualizando?
Use Vue DevTools para verificar se os dados reativos estão realmente mudando. Verifique problemas comuns como desestruturar objetos reactive, usar o tipo de ref errado ou computed properties com dependências condicionais.
Isso pode ajudar com erros TypeScript no Vue?
Sim, existem guias específicos para problemas TypeScript como limitações de tipos importados defineProps, tratamento de null em template ref e argumentos genéricos reactive.
Como faço para depurar falhas de carregamento de componentes assíncronos?
Verifique os slots loading e error do defineAsyncComponent. Certifique-se de que o tratamento de erros esteja em vigor e considere usar Suspense para um gerenciamento mais limpo de componentes assí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