為什麼 AI 寫前端時，總是優先選擇 React，而不是 Vue？
如果你在過去幾個月裡，高強度使用過 Codex、Cursor 或者是 Claude Code 等 AI 程式設計工具，你一定會察覺到一個讓國內前端開發者極度不適的現象：
當你丟給 AI 一張設計圖，或者一段自然語言需求，讓它幫你生成前端元件時，如果不做任何額外的 Prompt 限制，它預設吐出來的程式碼，永遠是 React 加上 Tailwind CSS🤔。
作為一個 Vue 開發者，你必須在提示詞裡反覆強調：請使用 Vue3 和 script setup 語法！。但即便如此，AI 生成的 Vue 程式碼裡，也經常會詭異地夾雜著 className，甚至試圖在 template 模板層裡寫 map 映射。
在框架使用者眼裡，這可能又是一場框架優劣的口水戰。但我想講的是，大模型這種壓倒性的框架偏好，其實暴露出的是底層技術架構的根本性差異。
只是因為訓練語料多嗎？
當你拋出這個問題時，絕大多數人給出的答案是：因為 React 擁有全球最龐大的生態，在 GitHub 上的開源專案和程式碼語料遠超 Vue。大模型吃進去的 React 程式碼多，吐出來的自然也就多。
這句話本身沒錯，但這只是一層極其懶惰的表象解釋🤷♂️。
大模型本質上是一個基於機率的 Token 預測機器。它在生成程式碼時，不僅受語料數量的影響，更受語言結構（AST）純粹性的制約。真正讓 AI 對 Vue 感到吃力並且頻繁產出幻覺的，是兩者在底層設計哲學上的巨大鴻溝🤔。
JS 純粹性與 DSL 的認知負擔
在我們人類程式設計師眼裡，Vue 極度優雅。它的單檔元件（SFC）把 <template>、<script> 和 <style> 物理隔離，邏輯清晰，極度符合人類對網頁結構的直覺認知。
但在大模型的眼裡，Vue 其實是一個極其複雜的 DSL（領域特定語言）。
大模型最擅長預測什麼？是標準的、圖靈完備的常規程式語言（比如純 JavaScript 或 Python）。
React 的 JSX 表面上看起來是標籤，但在 AST（抽象語法樹）層面，它本質上就是純粹的 JavaScript 函式呼叫。核心的控制流程（if/else、map、switch）完全遵循原生 JS 的語法規則。大模型在預測下一個 Token 時，上下文是高度連貫和內聚的👇。
tsx 代碼解讀複製代碼// 在大模型的使用，這根本不是 HTML，這只是個標準的 JS 純函式
export function UserList({ users }) {
return (
<ul>
{users.length > 0
? users.map(u => <li key={u.id}>{u.name}</li>)
: <li>暫無資料</li>}
</ul>
);
}而 Vue 則不同。大模型在生成 Vue 程式碼時，必須在腦海裡強行維護兩套完全割裂的上下文： 一套是基於 HTML 擴充的模板語法（v-if、v-for、v-model），另一套是下方的 script setup 響應式邏輯。
vue 代碼解讀複製代碼<!-- 大模型在生成長元件時，極其容易在這裡的模板層丟失資料映射 -->
<template>
<ul>
<template v-if="userList.length > 0">
<li v-for="u in userList" :key="u.id">{{ u.name }}</li>
</template>
<li v-else>暫無資料</li>
</ul>
</template>
<script setup lang="ts">
import { ref } from 'vue';
// 當程式碼超過 300 行，AI 很容易忘了上面綁定的變數到底是 users 還是 userList
const userList = ref([]);
</script>當上下文長度超過幾百行後，大模型極容易在 template 和 script 之間的變數綁定上產生災難級的幻覺。它可能會在模板裡寫出一個未經宣告的 ref 變數，或者在腳本裡寫了一堆邏輯，卻忘了透過模板指令去驅動畫面。
人類更擅長處理結構隔離，而機器更擅長處理邏輯同源🖐️。
那元件物理拆分的阻力是什麼？
在大模型的日常協作中，最深水區的痛點其實是程式碼的重構與拆分。
大模型寫程式碼有一個通病：喜歡把所有的邏輯都塞進一個巨大的檔案裡。當這個縫合怪元件膨脹到上千行時，你必須命令它進行拆分。
在 React 裡，拆分元件的成本極低。大模型只需要在同一個檔案裡，順手多寫幾個首字母大寫的 Function，就可以直接完成細粒度的邏輯抽離。這種按需內聯拆分的能力，極其契合 AI 的線性文字生成邏輯。
但在 Vue 的生態裡，建立一個新元件通常意味著必須在檔案系統裡新建一個 .vue 檔案，並且要處理繁瑣的 import 路徑、父子元件 props 傳遞和 emits 事件分發。多檔案並行生成和底層路徑映射，恰恰是目前所有 AI 程式設計工具最容易翻車的軟肋。
這直接導致了 AI 在寫大型 Vue 專案時，程式碼極易走向失控。
前端元件的文字化（複製貼上🤣）
最後，我們無法迴避整個前端元件庫生態的殘酷站隊。
在 AI 自動生成 UI 的時代，像 Shadcn UI 這種純粹基於 Tailwind CSS 和 Radix UI 的方案成為了絕對的統治者。為什麼？因為它的元件根本不是作為一個 npm 依賴套件黑盒存在的，而是可以直接被大模型閱讀、複製並內聯修改的純文字原始碼。
這種 程式碼即 UI 的模式，讓 AI 可以直接透視並客製化元件的每一個像素。而 Vue 生態裡佔據主導地位的（如 Element Plus 或 Ant Design Vue），依然是沉重的全域安裝包。大模型無法透視黑盒內部的程式碼，在遇到客製化需求時，只能絕望地去瞎猜文件設定參數😖。
在做技術選型時，我們往往會夾雜著太多關於好與壞的執念。
如果是完全由純開發者主導開發，Vue 極低的心智負擔、清晰的關注點分離，依然是中大型業務團隊穩盤的絕佳利器。
但如果我們正在邁入一個由 AI 主導程式碼生成的新紀元，我們就必須面對殘酷的現實：React 那種一切皆函式、一切皆 JavaScript 的純粹性，確實極大地降低了機器的認知負荷。
好了，今天寫到這裡吧🙌
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
