neo-vue

# 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` 計算屬性對陣列進行過濾。 ## Workflow Checklist Progress: - [ ] 步驟 1：感知專案環境與依賴 (Perceive Setup & Tooling) - [ ] 步驟 2：載入編碼規範與踩坑指南 (Load Guides & Best Practices) - [ ] 步驟 3：架構推理與響應式規劃 (Reasoning & Architecture) - [ ] 步驟 4：套用範本生成一致的程式碼 (Generate SFC & Stores) - [ ] 步驟 5：程式碼健檢與自我校對 (Code Quality Review) --- ## Detailed Guidelines ### 步驟 1 — 感知專案環境與依賴 (Perceive) 1. **檢查依賴配置**：讀取 `package.json`，確定 Vue 版本（確認為 Vue 3.x）以及是否安裝了 `pinia`、`vue-router`。 2. **識別建置工具與語言**：確認是否為 Vite 專案，以及是否啟用了 TypeScript（`lang="ts"`）與 Scoped CSS。 ### 步驟 2 — 載入編碼規範與踩坑指南 (Reason) ...