模組七｜生態系與踩坑心得（Day 29–30）
30 天前我在 Day 1 自首：我不信 Flutter Web。然後給自己設了一個實驗——不學 Dart，全程用 AI agent 開發，拿 Vue 的心智模型當座標系，逐一對照它到底行不行。
今天是最後一篇。不繞彎，先回答那個問題：它行不行？
答案是：**在它的主場，行，甚至比 Vue 順；離開主場，不行，而且是結構性的不行。**這不是和稀泥——「主場在哪」這 30 天已經量出來了，下面把地圖攤開。
| 模組 | 天數 | 一句話結論 |
|---|---|---|
| 一、心智模型轉換 | Day 1–5 | UI = f(state) 是共通語言；template/樣式/版面/元件都找得到對照物，轉換成本比想像低 |
| 二、響應式對照 | Day 6–10 | Vue 的細粒度依賴追蹤是奢侈品；Flutter 從 setState 一路演化到 Riverpod，本質是在補「宣告依賴」這件 Vue 天生就有的事 |
| 三、Routing | Day 11–14 | go_router 之後體驗接近 vue-router；Navigator 2.0 的複雜度是跨平台包袱，Web-only 使用者不必背 |
| 四、狀態管理 | Day 15–19 | Riverpod 之於 Pinia 是「不同哲學、同等戰力」；選型看團隊背景，不看框架優劣 |
| 五、建置與部署 | Day 20–24 | 首載 bundle 輸 Vue 一個量級是實測事實；長 session 工具型產品攤提得掉，內容站攤提不掉 |
| 六、SEO/SSR | Day 25–28 | 爬蟲看到的近乎空白，補救方案（預渲染、meta 注入）都是繞路；SEO 導向專案直接出局 |
| 七、生態與 DevTools | Day 29–30 | 開發期 debug 補得回來，release 可觀測性是真實落差；生態預設 mobile，Web 要主動驗證 |
如果你是中途進來的讀者，這張表就是最短路徑：挑你正在痛的那一列，跳回去讀那個模組就好，這系列從頭到尾都是對照式寫法，不需要按順序啃。
Day 1 我押了一個當時沒人寫過的論點：Flutter 對 AI agent 開發特別有利。30 天後，這是我最有把握的結論。
驗證下來成立的機制有三個：
flutter analyze 和編譯。對照 JS/TS：太多錯誤要到 runtime 才現形，agent 的回饋迴圈又慢又不確定。Dart 這邊，錯誤訊號快、集中、機器可讀——正好是 agent 最擅長消化的形態。flutter analyze、dart format、flutter test，訊號乾淨、無配置分歧。agent 自我修正不需要先搞懂這個專案用哪套 ESLint config。還有一個 Day 29 才收尾的加成：agent 工作流不靠 console 手戳、不開 DevTools，Flutter Web 人工 debug 的劣勢對它幾乎無感。
以及一個我出發時完全沒預料到的變數：系列進行中，Flutter 3.44 推出了 Agentic Hot Reload——Dart MCP server 自動連上正在跑的 app，agent 改完 code 直接熱重載，免手動設定。Day 1 我押的是「編譯期訊號夠乾淨」，30 天後這條訊號鏈自己延伸到了執行期：agent 從「寫完等我看」變成「改完自己看」。論點不但成立，還被生態往前補了一塊我沒算到的地基。
最後是方法論上的心得：「不學 Dart、用 agent 寫」這個實驗設定本身就是答案的一部分——它恰好避開 Flutter 最大的採用成本（學習曲線），保留它的優點。我 30 天下來仍然不會憑空寫 Dart，但我能讀懂 agent 的產出、驗證它的行為、量它的數據。在 agent 時代，「會不會寫某語言」和「能不能用某框架出貨」正在脫鉤，這個系列就是一次公開的脫鉤實驗。
Day 1 給過一棵決策樹，當時說 Day 30 會拿實測數據回來驗證要不要修。驗證完畢：三個分支全部成立，維持原判，只是每個分支現在有數據和案例撐腰。
**分支 1：有 Flutter mobile app 要延伸 web → 用。**唯一強理由，30 天沒有動搖它。跨平台複用是 Flutter Web 存在的原因，其他優點都是衍生。
分支 2：Canvas 密集工具型產品 + 不需 SEO → 可考慮。這是實測後我態度變得最正面的分支。教科書案例是看盤軟體：K 線和深度圖在 Vue 也得跳過 DOM 手寫 canvas，DOM 優勢本來就用不到；tick 級高頻重繪走 RenderObject 管線比 DOM diff 更貼近需求本質；登入牆後爬蟲進不來，SEO 硬傷直接豁免；使用者掛一整天，1.5MB 首載攤在數小時 session 裡無感。這種場景下 Flutter Web 不是「能不能用」，是可能比 Vue 更順——而且這類產品幾乎都配 mobile app，同時命中分支 1。
**分支 3：一般網站／內容站／電商 → Vue，不用懷疑。**SEO（Day 25–28）加首載（Day 22）兩刀，內容型產品直接出局。這不是調校問題，是「內容是 canvas 像素」的架構性結果，等 SSR 或等 WASM 都救不了「進來看一篇就走」的攤提模型。
一個懷疑者用 30 天實測換來的，不是立場翻轉，而是邊界的精度：我現在能說出「哪裡行、為什麼行、行到什麼程度」，而不是「聽說它 SEO 不好」。
按投入成本排序，做到哪一層看你的需求：
30 天前的假設全數驗完：懷疑者依然大部分懷疑，但懷疑得更有依據；少數場景的信任，也信任得有數據。這比出發時「反正台灣沒人用」的模糊直覺，值錢得多。
謝謝一路看到這裡的你。如果這個系列對你有一點用，我想要一個回報：留言告訴我你的答案——你手上有沒有落在分支 2 的產品？你用 agent 寫過不熟的語言嗎，體驗如何？你覺得「會寫某語言」和「能用某框架出貨」的脫鉤，是機會還是警訊？
這些答案會決定我下一個系列寫什麼。完賽，收工。
iThome鐵人賽
看影片追技術