聯繫我

如果有任何問題或建議，歡迎隨時聯繫我：

• GitHub
• Email

前言

嘿，我的朋友，恭喜你！當你看到這篇文章時，代表你已經完成了這趟為期 30 天的 Vue 攀登之旅。請務必給自己一個大大的掌聲！

回首這段旅程，我們從 Vue 3 的核心理念出發，親手體驗了 Composition API 帶來的開發思維轉變。我們學習了：

• 基礎：響應式系統 (ref, reactive)、元件化 (props, emits, slots)。
• 生態：用 Vue Router 管理路由，用 Pinia 管理狀態。
• 強化：在 Vue 中無縫整合 TypeScript，為程式碼加上型別的鎧甲。
• 品質：用 Vitest 和 Testing Library 為我們的應用建立自動化測試的防線。
• 優化：從執行期效能 (keep-alive) 到載入期效能 (Code Splitting)。
• 內功：最後，我們探討了軟體工程的藝術——重構與可維護性。

這就像一場紮實的武術修行。我們不僅學會了各種招式，更理解了背後的內功心法。現在的你，已經有足夠的能力去打造一個完整、健壯、且高品質的 Vue 應用。

在旅程的終點，讓我們把目光放遠，看看 Vue 這片大陸的未來，以及它周邊繁榮的生態系。這不是結束，而是一個全新世界的起點。

1. 我們的行囊：Vue 開發最佳實踐總結

在踏入新世界前，讓我們整理一下行囊，將這 30 天的精華濃縮成一份最佳實踐清單：

1. 擁抱 Composition API：優先使用 <script setup> 語法糖，它能帶來最好的程式碼組織能力與型別推斷。
2. 萬物皆可為元件：貫徹原子化設計思想，將 UI 拆分為可複用的微小元件。
3. 邏輯複用靠 Composable：將所有非視覺的、可複用的邏輯，都抽離成 useXXX 的 Composable 函式。
4. 善用 TypeScript：從 props、emits 到 ref、reactive，讓 TypeScript 成為你開發時的左膀右臂。
5. 狀態管理找 Pinia：當遇到需要跨元件共享的狀態時，毫不猶豫地使用 Pinia。告別 Props Drilling。
6. 為使用者而測試：用 Testing Library 撰寫整合測試，確保你的應用從使用者的角度是可用的。
7. 路由必定 Lazy Load：這是最簡單、效益最高的效能優化，沒有理由不做。
8. 持續重構：遵循童子軍原則，「讓營地比你來時更乾淨」。隨手進行小重構，是保持程式碼品質的唯一途徑。

2. Vue 的下一步：Vapor Mode

Vue 團隊一直在探索如何讓框架變得更快、更輕。下一個重大革新，就是 Vapor Mode。

• 這是什麼？：一個全新的、可選的編譯模式。它的靈感來自於 Solid.js，目標是極致的效能。

• 它如何運作？：簡單來說，它拋棄了 Virtual DOM！在 Vapor Mode 下，你的 .vue 檔案會被編譯成極度優化的、原生的 JavaScript DOM 操作指令。它不再需要運行時的 diff 比對，而是精準地知道要更新哪個 DOM 元素。

• 比喻：

  • Virtual DOM 就像一個建築「工頭」。每次有變動，工頭需要拿著新舊兩份藍圖進行比對，找出差異，然後告訴工人們要去敲掉哪面牆、在哪裡砌磚。
  • Vapor Mode 則像一本「超級精準的 IKEA 組裝說明書」。它直接告訴工人：「去 A 點，用 5 號螺絲鎖緊 B 板塊」。沒有中間商（工頭）賺差價，指令直達，效率最高。

• 對我們有何影響？

  • 效能提升：更快的渲染速度、更小的打包體積、更低的記憶體佔用。
  • 它是可選的：最棒的是，你可以在一個應用中混合使用！對於那些效能極度敏感的元件（例如高頻更新的圖表），你可以選擇性地開啟 Vapor Mode，而應用的其他部分依然使用我們熟悉的 VDOM。你的現有知識 100% 可以沿用！

3. 拓展你的視野：Vue 生態系精選

學會了 Vue 本身，只是拿到了進入遊樂園的門票。園區裡還有很多精彩的設施值得我們去探索。

Nuxt：Vue 的全端超能力

• 定位：基於 Vue 的全端框架 (Full-stack Framework)。
• 它提供了什麼？：伺服器端渲染 (SSR)、靜態網站生成 (SSG)、檔案式路由、API 路由... 所有你需要建構一個現代化網站的功能，都幫你內建好了。
• 何時使用？：當你的專案需要 SEO（例如部落格、電商網站、企業官網），或是你想用同一套技術棧（Vue）來同時搞定前後端時，Nuxt 是你的不二之選。

VueUse：你的 Composable 工具百寶箱

• 定位：一個巨大的、高品質的 Vue Composable 工具集合。
• 它提供了什麼？：你想得到的各種常用功能，幾乎都有人幫你寫好了。例如：
  • useStorage：輕鬆操作 localStorage / sessionStorage。
  • useDebounceFn：函式防抖。
  • useScroll：監聽滾動狀態。
  • useDraggable：讓元素可拖拽。
  • ...還有數百個實用的工具！
• 何時使用？：幾乎所有專案！ 在你動手自己造輪子前，先來 VueUse 找一找，大概率能找到更優雅、更可靠的現成方案。

Vuetify / PrimeVue / Naive UI：企業級 UI 元件庫

• 定位：預先打造好的、美觀且功能強大的 UI 元件庫。
• 它們提供了什麼？：複雜的資料表格、日期選擇器、樹狀檢視、上傳元件... 這些你不想自己從零開始做的東西，它們都幫你做好了。
• 何時使用？：當你需要快速開發一個功能複雜的後台管理系統或企業級應用時，使用這些元件庫能極大地節省你的開發時間。

旅程的終點，也是起點

30 天的鐵人賽即將結束，但我們的學習之路才剛剛開始。前端的世界日新月異，今天我們討論的 Vapor Mode，也許在不久的將來就會成為主流。

但請不要焦慮。因為在這 30 天裡，你學到的最重要的東西，不是某個特定的 API，而是解決問題的思維方式：如何拆分問題、如何組織邏輯、如何保證品質、如何優化效能。

保持好奇心，持續學習，多看看社群的分享，多動手嘗試新的工具。希望這次的鐵人賽，能成為你深入 Vue 世界的一塊堅實基石。

感謝大家一路的陪伴，希望有幫助到大家，也謝謝鐵人邦舉辦的這次活動！

最後的自我挑戰

1. 探索 Nuxt：前往 Nuxt 官網，花 30 分鐘跑完它的「Getting Started」教學，感受一下全端框架的魅力。
2. 整合 VueUse：在你的專案中安裝 @vueuse/core。試著用它的 useStorage 來取代你手動操作 localStorage 的程式碼。
3. 展望未來：在 YouTube 上搜尋「Vue Vapor Mode」，觀看一場相關的演講，親眼看看 Vue 的未來是什麼樣子。

本日關鍵字回顧

• Vapor Mode
• 無虛擬 DOM (Virtual DOM-less)
• 細粒度響應式 (Fine-grained Reactivity)
• Nuxt
• 伺服器端渲染 (SSR)
• 靜態網站生成 (SSG)
• VueUse
• UI 元件庫 (Component Frameworks)
• 持續學習 (Continuous Learning)