技能 vue-debug-guides
📦

vue-debug-guides

安全

Vue 3 偵錯指南

也可從以下取得: hyf0

Vue 3 應用程式會遇到難以偵錯的執行階段錯誤、警告訊息、非同步失敗和 SSR 水合問題。本技能提供全面的偵錯指南和超過 100 個常見 Vue 3 開發問題的解決方案。

支援: Claude Codex Code(CC)
🥉 74 青銅
1

下載技能 ZIP

2

在 Claude 中上傳

前往 設定 → 功能 → 技能 → 上傳技能

3

開啟並開始使用

測試它

正在使用「vue-debug-guides」。 為什麼我的 computed 屬性沒有更新？

預期結果:

這可能是 computed 屬性依賴問題。Vue 3 中的 computed 屬性只會追蹤其 getter 函式中存取的響應式依賴。如果您正在解構 reactive 物件或在條件後存取巢狀屬性，computed 可能不會更新。請參閱「computed-conditional-dependencies」指南以取得解決方案。

正在使用「vue-debug-guides」。 如何在 Vue SSR 中修復水合不相符？

預期結果:

當伺服器和客戶端呈現不同內容時會發生水合不相符。常見原因包括：1) 使用瀏覽器專用 API 如 localStorage 或 window，2) 渲染期間產生的隨機值，3) CSS 導致的佈局差異。對瀏覽器 API 使用 onMounted，對隨機值進行 seeding，並對動態內容使用 ClientOnly 元件。

正在使用「vue-debug-guides」。 為什麼我的模板 refs 是 undefined？

預期結果:

模板 refs 只在元件 mount 後才能存取。如果您在 setup() 中嘗試存取它們，它們將是 undefined。請使用 onMounted 生命週期鉤子或 flush: 'post' 的 watchEffect 以確保 refs 已填入。另請檢查元素是否使用 v-if 條件渲染 - v-if 元素的 refs 在條件為 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
規範符合性

你能建構什麼

偵錯響應式問題

當 Vue 元件因響應式參考問題、解構錯誤或 computed 屬性問題而意外停止更新時

修復 SSR 水合錯誤

當伺服器端渲染的 Vue 應用程式顯示水合不相符警告或客戶端-伺服器內容差異時

解決非同步元件失敗

當延遲載入的元件載入失敗、顯示錯誤不正確或導致 Vue 應用程式記憶體洩漏時

試試這些提示

偵錯 Vue 響應式問題 
我的 Vue 3 元件在變更資料時沒有更新。ref 值有變化但模板沒有重新渲染。我該如何偵錯這個問題？
修復水合不相符 
我的 Nuxt 應用程式出現水合不相符警告。伺服器 HTML 與客戶端不一致。我該如何解決？
解決監聽器未觸發 
我的監聽器在 reactive 物件中的巢狀屬性變更時未觸發。我使用了 deep: true，但回調函式從未帶有新舊值觸發。
偵錯非同步元件記憶體洩漏 
我在非同步元件中使用 KeepAlive，我的應用程式顯示記憶體洩漏。mounted 鉤子多次執行但 unmounted 從未觸發。我該如何解決？

最佳實務

  • 使用 Vue DevTools 即時檢查元件狀態、props 和發出的事件
  • 在開發期間啟用 Vue 的嚴格模式以儘早發現響應式問題
  • 始終明確宣告 emits 以避免意外重複觸發事件

避免

  • 直接解構 reactive 物件 - 這會破壞響應式，必須使用 toRefs 或 toRaw
  • 使用 v-for 時不指定 :key - 會導致渲染問題和不可預測的行為
  • 僅在執行時定義 emits 而不進行類型基礎的宣告 - 會失去類型安全

常見問題

本技能是否適用於 Vue 2？
不，本技能專注於 Vue 3 偵錯。Vue 2 具有不同的 API 和模式，需要單獨的指南。
本技能能否幫助解決效能問題？
是的，本技能包含效能問題的指南，如不必要的重新渲染、props 穩定性和 computed 物件穩定性。
這是否涵蓋 Nuxt 特定問題？
是的，有關於 SSR 水合不相符和伺服器端渲染問題的指南，適用於 Nuxt 應用程式。
如何偵錯響應式狀態未更新的問題？
使用 Vue DevTools 驗證響應式資料確實正在變更。檢查常見問題，如解構 reactive 物件、使用錯誤的 ref 類型，或具有條件依賴的 computed 屬性。
這能否幫助解決 Vue 中的 TypeScript 錯誤？
是的，有關於 TypeScript 問題的特定指南，如 defineProps 匯入類型限制、模板 ref 空值處理和 reactive 泛型參數。
如何偵錯非同步元件載入失敗？
檢查 defineAsyncComponent 的載入和錯誤槽位。確保有錯誤處理，並考慮使用 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