iT邦幫忙

2025 iThome 鐵人賽

DAY 30
0
Vue.js

完成_個人健康習慣追蹤相關功能網站系列 第 30

三十天後,我學會的不只是 Vue

  • 分享至 

  • xImage
  •  

三十天前,我打開 Visual Studio Code,空白的畫面讓我有點害怕,我只知道 Vue 是一個框架,卻不知道要怎麼讓它動起來,那時候我對「元件」和「資料綁定」的概念都還模糊,唯一確定的只有一件事,我要試著撐完這個挑戰。

剛開始的前幾天,我花了大量時間理解最基本的結構,怎麼新增任務、怎麼顯示、怎麼用 v-for、怎麼刪除,過程中我反覆看文件、查資料、問 AI,有時只是為了找到那個漏掉的括號或拼錯的變數名稱,但當清單第一次成功顯示在畫面上時,我真的很開心,那不是因為做出了甚麼厲害的功能,而是一種「我做到了」的感覺!

到了中段,我開始進入比較有挑戰性的部分,我學了 i18n 國際化、主題切換、RWD 響應式設計、還有 localStorage 的資料保存,這些功能不難,但要讓它們「一起正常運作」卻很花心思,有時候只是改一個變數名稱,就整個畫面壞掉;有時候只是漏掉一個 watch,就讓主題不同步,那段時間,我幾乎天天在和 bug 打架,也在學習 debug。

到 Day 20 之後,整個專案開始有了「穩定的節奏」,我不再只是照著教學影片複製程式碼,而是開始理解每個檔案的角色與邏輯之間的關係,我知道哪裡該用 props 傳遞、哪裡該 emit 事件、知道為什麼要把邏輯獨立成 composable,知道怎麼命名會讓以後的我更容易閱讀,從那時起,我感覺到這不再只是一個作業,而是我在建立的作品。

到了最後這幾天,我開始整理整體結構,我重整了 README,為每個資料夾寫下註解,也在 useTasks.js、main.js 裡留下故事型的說明,我開始懂得用文字紀錄程式邏輯,用語氣保留設計思考,那不只是方便維護,更像是對未來的自己說明:「這裡的邏輯是為了可讀性」「這段設計是為了體驗」,註解變成了我理解程式的方式。

回頭看,三十天裡我總共調過十多次架構,學了 Vue 3 的生命週期、ref/reactive/computed/watch、還學了 composables、router、i18n、Pinia 的概念、從完全不懂到能自己完成一個完整的網站,但最讓我意外的收穫,不是那些技術名詞,而是我開始相信,任何複雜的東西,只要拆開、命名、整理,就能被理解,這個挑戰不只是學程式,也是一種思維訓練。

現在回頭看整個專案,我不只看見一個任務清單網站,而是三十天的痕跡:從卡關到突破、從混亂到秩序,三十天後,我學會的不只是 Vue,我學會了怎麼整理問題、怎麼保持節奏,最重要的是,我學會相信那個能慢慢學會的自己。

final take :
https://ithelp.ithome.com.tw/upload/images/20251014/20178068hToIFBCLEm.pnghttps://ithelp.ithome.com.tw/upload/images/20251014/20178068o4Z2M2ZVPn.png


上一篇
讓程式會說話:為未來的自己寫註解
系列文
完成_個人健康習慣追蹤相關功能網站30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言