小編精選 - 技術文章翻譯 · 05月08日

當 AI 開始替我寫程式碼，我還要糾結選 Vue 還是 React 嗎？

當 Claude Code 開始替我寫程式碼，我還要糾結選 Vue 還是 React 嗎？

一個前端工程師的真實困惑：頂尖 AI 對不同框架的理解，居然差這麼多

去年 Anthropic 推出的 Claude Code 在開發者圈子裡討論度很高，然後我發現了一個值得聊一聊的現象：

同一個 Claude Code，寫 React 的時候像熟練工，寫 Vue 的時候像實習生。

這不是在吐槽 Vue 不好。我本人非常喜歡 Vue 的優雅。這是在深度使用 Claude Code 兩個月後，一個讓我不得不面對的事實。

今天這篇文章，我想和你誠實地聊聊這件事。不站隊，不引戰，就是分享一些真實的使用體驗和思考。

一、Claude Code 讓我看到了什麼

先說 Claude Code 的特點。和 Copilot 那種「邊寫邊補全」的模式不同，Claude Code 更像一個真正的結對程式設計夥伴——你給它一個任務，它會自己讀程式碼、分析上下文、制定方案，然後輸出完整的程式碼。

這種能力很強，但對不同框架的「理解深度」差別也更容易暴露出來。

用 Claude Code 寫 React 時：

給我感受最深的是它的上下文理解能力。我只需要說「把這個表單改成受控元件」，它會自動找到相關的 state 定義、修改 onChange 處理、調整提交邏輯。整個過程幾乎不需要我干預。

用 Claude Code 寫 Vue 3 時：

同樣級別的任務，結果就不太穩定。有時候它會把 ref 和 reactive 搞混，有時候 watch 的寫法不對，有時候模板裡的事件繫結格式有問題。

最典型的場景：讓它在一個既有 Vue 專案裡增加一個新功能，它有時會忘記專案用的是 Composition API，生成一段 Options API 的程式碼。雖然能跑，但風格不一致，我得手動改。

這不是不能用，但確實多了一道「檢查＋修正」的工序。

我統計了一下過去一個月兩個專案的 Claude Code 使用資料：

專案	框架	一次生成可接受的比例	需要手動修正的比例
專案 A	React	82%	18%
專案 B	Vue 3	67%	33%

同樣的 Claude Code，同樣的任務複雜度，React 專案的生成品質明顯更高。

二、為什麼會有這種差異？我分析了三個原因

原因 1：訓練資料的「先天優勢」

這是最根本的原因。

Claude 的訓練資料主要來自網路公開程式碼。GitHub 上 React 倉庫的數量是 Vue 的 10 倍以上，Stack Overflow 上 React 的問答量也遠超 Vue。

AI 學什麼，取決於它看了什麼。看 React 程式碼多了，自然更懂 React。

這不是框架好壞的問題，是純粹的統計學問題。

原因 2：範式匹配度的差異

Claude Code 的強項是「理解意圖，生成程式碼」。這種能力在函數式範式下發揮得更好。

React 元件是「狀態 → UI」的純函式，變數作用域清晰，依賴關係簡單，Claude 很容易理解「輸入是什麼，輸出是什麼」。

Vue 的模板語法雖然對人類友善，但對 AI 來說多了一層「編譯轉換」。Claude 需要先理解模板語法，再理解背後的響應式邏輯，中間多了一道工序，出錯的機率自然更大。

原因 3：典型案例的密度

React 生態裡有大量高品質的典型程式碼案例——Vercel 的腳手架、Next.js 的官方範例、各種開源元件庫的最佳實踐。這些案例被反覆用於 AI 的訓練和測試，形成了一個正向循環。

Vue 生態同樣優秀，但在「被 AI 吃掉」的典型案例數量上，確實存在差距。

三、Vue 使用者真的「吃虧」了嗎？換個角度看

上面說了這麼多，可能會讓人覺得「那 Vue 是不是不配在 AI 時代生存」。

我不這麼看。

角度 1：Claude Code 對 Vue 的支援在快速進步

Anthropic 的模型迭代很快。我從 2 月開始用 Claude Code，到 4 月，明顯感覺到它對 Vue 3 的 Composition API 理解好了很多。

如果你現在開始用，體驗可能已經比我好。

角度 2：Vue 的模板語法反而限制了 AI 的「發揮」

這是個有意思的發現。

JSX 很靈活，但 Claude 有時會生成一些「靈活到離譜」的程式碼——巢狀過深、邏輯混亂、勉強能跑但沒法維護。

Vue 的模板語法約束更強，Claude 在約束更強的環境裡「犯錯空間」更小。雖然生成速度慢一點，但生成的結構通常更規整。

角度 3：提示工程可以彌補差距

Claude Code 支援自訂指令。你可以給每個專案配置一個 .claude/instructions.md 檔案。

我專門為 Vue 專案寫了一份指令檔，告訴 Claude：用 Composition API、用 <script setup> 語法、ref 和 reactive 的使用規則、專案裡用的元件庫是什麼。

加上指令後，Vue 專案的生成品質有明顯提升，接受率從 67% 提升到了 75% 左右。

四、這一個月我是怎麼用的

分享幾個實際的配置和使用習慣，也許對你有用。

Claude Code 的專案配置（Vue）：

在專案根目錄建立 .claude/instructions.md：

## 技術棧
- Vue 3.5+，使用 Composition API
- 一律使用 <script setup> 語法
- 響應式：基本型別用 ref，物件用 reactive
- UI 元件：Element Plus

## 程式碼規範
- 模板中直接使用 ref 變數，不需要 .value
- 事件處理使用 @ 前綴
- 元件命名使用 PascalCase

日常使用習慣：