iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
Modern Web

Vue 前端工程師視角看 Flutter Web 系列

寫了十年 Vue 的前端工程師,先自首:我不信 Flutter Web。這系列不是勸你改寫 Flutter,是一個懷疑者的實測——把 Vue 的心智模型當座標系(reactivity、SFC、路由、狀態管理、建置部署、SEO),逐一對照 Flutter Web,看它到底行不行。每篇固定走「Vue 怎麼做 → Flutter Web 怎麼做 → 差異與坑」。實測數字出自同一組對照專案:Vue 版與 Flutter Web 版畫面一模一樣的訂票 side project,唯一變因是底層技術。另一個實驗變數:全程不學 Dart、用 AI agent 開發。30 天後給出可辯護的選型結論。

參賽天數 21 天 | 共 21 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day 1|為什麼 Vue 前端要認識 Flutter Web?系列開篇與學習地圖

模組一|心智模型轉換(Day 1–5) 我是寫了十年以上 Vue 的前端工程師,而且先自首:我不信 Flutter Web。在台灣業界它不流行,我環顧四周也...

2026-08-06 ‧ 由 harryfan 分享
DAY 2

Day 2|SFC template vs widget tree:宣告式 UI 的兩種寫法

模組一|心智模型轉換(Day 1–5) 先備:Day 1(系列前提與 Waypoint Air 兩個對照 repo)。零 Dart 基礎可以直接讀下去,本篇每...

2026-08-07 ‧ 由 harryfan 分享
DAY 3

Day 3|CSS 選擇器 vs Flutter 樣式系統(BoxDecoration、TextStyle)

模組一|心智模型轉換(Day 1–5) 先備:沒有。Day 1(Flutter Web 把整個畫面畫進一塊 canvas、DOM 只剩一個節點)與 Day 2...

2026-08-08 ‧ 由 harryfan 分享
DAY 4

Day 4|版面配置對照:Flexbox/Grid vs Row/Column/Stack

模組一|心智模型轉換(Day 1–5) 先備:Day 2(widget tree 怎麼讀)、Day 3(樣式寫在哪)。第一次讀可以略過兩段簡例的細節,直接跳到...

2026-08-09 ‧ 由 harryfan 分享
DAY 5

Day 5|元件化思維:Vue 元件 props/emit vs Flutter Widget 建構子/callback

模組一|心智模型轉換(Day 1–5) 先備:Day 2(widget tree 與第一段 Dart 語法)、Day 4(Row/Column 的 const...

2026-08-10 ‧ 由 harryfan 分享
DAY 6

Day 6|Vue reactivity 核心:ref/reactive/computed 原理

模組二|響應式對照(Day 6–10) 先備:Day 2(第一段 Dart 語法、具名參數與 super.key)、Day 5(建構子就是元件的公開介面)。第...

2026-08-11 ‧ 由 harryfan 分享
DAY 7

Day 7|Flutter setState:最原始的重繪機制與痛點

模組二|響應式對照(Day 6–10) 先備:Day 2(widget tree 與第一段 Dart 語法)、Day 6(Vue 的 track/trigge...

2026-08-12 ‧ 由 harryfan 分享
DAY 8

Day 8|Provider:依賴注入式狀態管理初探

模組二|響應式對照(Day 6–10) 先備:Day 6(依賴追蹤)、Day 7(setState 與 rebuild 粒度)。第一次讀可跳過本篇 Flutt...

2026-08-13 ‧ 由 harryfan 分享
DAY 9

Day 9|Riverpod vs Pinia:對照著手,Provider 語法 vs 組合式風格

模組二|響應式對照(Day 6–10) 先備:Day 6(依賴追蹤 track/trigger)、Day 8(provider 套件與 context.wat...

2026-08-14 ‧ 由 harryfan 分享
DAY 10

Day 10|Bloc/Cubit:事件驅動狀態管理,Vue 有類似模式嗎?

模組二|響應式對照(Day 6–10) 先備:Day 8(context.read / context.watch 的取用方式)、Day 9(Riverpod...

2026-08-15 ‧ 由 harryfan 分享