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

vue-debug-guides

آمن

Vue 3 デバッグガイド

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

Vue 3 アプリケーションでは、ランタイムエラー、警告メッセージ、非同期エラー、SSRハイドレーションの問題が発生し、デバッグが困難な場合があります。このスキルは、100以上の一般的なVue 3開発問題に対する包括的なデバッグガイドとソリューションを提供します。

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

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

2

رفع في Claude

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

3

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

اختبرها

استخدام "vue-debug-guides". computedプロパティが更新されないのはなぜですか？

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

これはcomputedプロパティの依存関係の問題である可能性が高いです。Vue 3のcomputedプロパティは、ゲッター関数内でアクセスされたリアクティブな依存関係のみを追跡します。リアクティブオブジェクトを分割代入したり、条件分岐の後にネストされたプロパティにアクセスしたりすると、computedが更新されない場合があります。解決策については'computed-conditional-dependencies'ガイドを参照してください。

استخدام "vue-debug-guides". Vue SSRでハイドレーション不一致を修正するにはどうすればいいですか？

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

ハイドレーションの不一致は、サーバーとクライアントが異なるコンテンツをレンダリングするときに発生します。一般的な原因には、1) localStorageやwindowなどのブラウザ専用APIの使用、2) レンダリング中に生成されるランダム値、3) レイアウトの違いを引き起こすCSSがあります。ブラウザAPIにはonMountedを使用し、ランダムジェネレーターにシードを設定し、動的コンテンツにはClientOnlyコンポーネントを使用してください。

استخدام "vue-debug-guides". テンプレートrefがundefinedになるのはなぜですか？

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

テンプレートrefはコンポーネントがマウントされた後にのみ利用可能です。setup()でアクセスしようとするとundefinedになります。refが設定されていることを確認するには、onMountedライフサイクルフックまたはflush: 'post'を指定したwatchEffectを使用してください。また、要素がv-ifで条件付きレンダリングされているかどうかも確認してください。v-if要素へのrefは、条件がfalseのときnullになります。

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

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

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

リアクティビティの問題をデバッグ

リアクティブ参照の問題、分割代入エラー、computedプロパティの問題により、Vueコンポーネントが予期せず更新されなくなった場合

SSRハイドレーションエラーを修正

サーバーサイドレンダリングされたVueアプリケーションでハイドレーション不一致の警告やクライアント・サーバー間のコンテンツ違いが表示される場合

非同期コンポーネントのエラーを解決

遅延読み込みされたコンポーネントの読み込みに失敗する、エラーが正しく表示されない、Vueアプリケーションでメモリリークが発生する場合

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

Vueリアクティビティの問題をデバッグ 
Vue 3コンポーネントがデータを変更しても更新されません。refの値は変わりますが、テンプレートが再レンダリングされません。どうやってデバッグすればいいですか？
ハイドレーション不一致を修正 
Nuxtアプリケーションでハイドレーション不一致の警告が出ています。サーバーのHTMLがクライアントと一致しません。どうやって修正すればいいですか？
ウォッチャーが発火しない問題を解決 
リアクティブオブジェクトのネストされたプロパティが変更されても、ウォッチャーがトリガーされません。deep: trueを使用していますが、コールバックが新旧の値で発火しません。
非同期コンポーネントのメモリリークをデバッグ 
KeepAliveを非同期コンポーネントと一緒に使用しており、アプリケーションでメモリリークが発生しています。mountedフックが複数回実行されますが、unmountedは一度も発火しません。どうやって修正すればいいですか？

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

  • Vue DevToolsを使用して、コンポーネントの状態、props、発行されたイベントをリアルタイムで検査する
  • 開発中にVueのstrictモードを有効にして、リアクティビティの問題を早期に発見する
  • 意図しない重複イベント発火を避けるため、常にemitsを明示的に宣言する

تجنب

  • リアクティブオブジェクトを直接分割代入する - リアクティビティが壊れるため、toRefsまたはtoRawを使用する必要がある
  • :keyなしでv-forを使用する - レンダリングの問題や予測不能な動作を引き起こす
  • ランタイムでのみemitsを定義し、型ベースの宣言を行わない - 型安全性が失われる

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

このスキルはVue 2でも動作しますか？
いいえ、このスキルはVue 3のデバッグに特化しています。Vue 2には異なるAPIとパターンがあり、別のガイドが必要です。
パフォーマンスの問題にも役立ちますか？
はい、このスキルには不必要な再レンダリング、propsの安定性、computedオブジェクトの安定性などのパフォーマンス問題のガイドが含まれています。
Nuxt固有の問題も対象ですか？
はい、Nuxtアプリケーションに適用されるSSRハイドレーションの不一致やサーバーサイドレンダリングの問題に関するガイドがあります。
リアクティブ状態が更新されない問題をどうやってデバッグしますか？
Vue DevToolsを使用して、リアクティブデータが実際に変更されているかを確認してください。リアクティブオブジェクトの分割代入、間違ったrefタイプの使用、条件付き依存関係を持つcomputedプロパティなどの一般的な問題を確認してください。
VueのTypeScriptエラーにも役立ちますか？
はい、definePropsのインポート型の制限、テンプレートrefのnull処理、リアクティブジェネリック引数など、TypeScriptの問題に関する具体的なガイドがあります。
非同期コンポーネントの読み込みエラーをどうやってデバッグしますか？
defineAsyncComponentのloadingスロットとerrorスロットを確認してください。エラーハンドリングが適切に設定されていることを確認し、よりクリーンな非同期コンポーネント管理のためにSuspenseの使用を検討してください。

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

المؤلف

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