昨天完成了 RWD 響應式設計之後，我就開始思考，這個網站除了「能夠在不同螢幕下正常顯示」之外，還能不能再變得更聰明， Vue 的魅力並不只是畫面上好看，更是在於「響應式系統」，什麼是響應式呢？簡單來說，就是資料變了，畫面就會自動更新，程式不需要一步一步手動指揮。今天的挑戰，就是要好好體驗 Vue 的這個核心，學會如何使用 ref、reactive、computed、watch 這幾個關鍵能力，讓網站能真正做到「資料驅動畫面」。
首先，我在首頁新增了一個「統計列」，用來顯示任務的數量狀況。裡面包含四個數字：全部任務數、已完成數、未完成數，以及完成率百分比。如果要用傳統的方式，可能需要在每次任務增刪改變時，都重新呼叫函式去更新這些數字，這樣的寫法既麻煩，又容易出錯。但 Vue 的 computed 幫忙解決了這個問題。就像一台秤重器，我只要站上去，就會自動算出我的體重；同理，我只要在程式裡寫好「計算規則」，Vue 就會在資料變動的那一瞬間，自己算出最新的結果，並且更新到畫面上！
接下來就是 watch 的部分。就像是一個貼身筆記員，會默默記下一切變化，確保下次回來還能保持一樣的狀態。在「主題切換」和「語言切換」上特別有用。舉例來說，如果把網站切換成深色模式，但一重整頁面又跑回淺色，那就會非常破壞使用者的體驗感。同樣地，如果把語言換成英文，結果下一秒又跳回中文，那前面的設定豈不是白費了，所以我在 App.vue 裡加上 watch，去監聽使用者的主題（theme）和語言（locale），一旦被改變，就即時寫進 localStorage，有了 watch 的幫助，網站不只是「響應式」，還擁有了「記憶力」。
今天最終成果長這樣：