Modern Vue 3 & Pinia 開發專家 (neo-vue)

本技能為 Agent 提供 Vue 3 (Composition API) 與 Pinia 狀態管理的開發與審查指南。它協助產出符合 Vue Style Guide 優先級 A/B 規則的程式碼，避開常見響應式陷阱，並生成一致、強型別的單一檔案元件（SFC）。

Gotchas

• 解構 reactive 物件導致響應性丟失：禁止直接解構 props 或由 reactive() 定義的物件（例如：const { name } = props 或 const { x } = state），這會徹底失去 Vue 響應式追蹤！
  • 防錯機制：必須使用 toRefs(props) 或 toRef(props, 'name') 來保持其響應性。
• 解構 Pinia Store 導致狀態響應性丟失：直接解構 Pinia store 的 state（如 const { user } = useAuthStore()）會使 state 失去雙向響應！
  • 防錯機制：必須使用 storeToRefs(store) 來解構 state；而 action 則可以直接正常解構。
• v-model 手動繁瑣綁定：在 Vue 3.4 之前，自定義雙向綁定需要手動宣告 modelValue 屬性並觸發 update:modelValue 事件，容易寫錯。
  • 防錯機制：在 Vue 3.4+ 專案中，優先使用 defineModel() 巨集宣告雙向綁定，降低屬性與事件不一致的風險。
• v-if 與 v-for 在同一節點混用：在 Vue 3 中，v-if 的優先級高於 v-for，這意味著 v-if 的條件判斷無法存取到 v-for 迴圈中的變數，會直接導致編譯或執行期報錯！
  • 防錯機制：永遠使用 <template> 標籤包裹 v-for，再於內部子節點使用 v-if，或者預先使用 computed 計算屬性對陣列進行過濾。