有時候面對一堆待辦清單，會覺得眼前一片混亂，那些完成的、未完成的，全部擠在一起，好像在提醒自己「你還沒做完這些」，所以今天我想給清單加上三個分類的濾鏡，就像換濾水器一樣，讓我可以選擇想看的水質，是想看全部？還是專注在還沒做的？或者，單純看看自己已經完成多少。

想達到今天的目標，就需要完成這幾項：

第一層改變：加入「全部／未完成／已完成」三個按鈕，這一步的重點在介面，在 Toolbar.vue 裡面放三個小按鈕，對應三種狀態，All、Todo、Done，每個按鈕按下去時，會觸發一個事件，把選到的篩選條件往上傳給父層，這裡我特別學到一個設計觀念，子元件不應該直接改資料，而是「告訴」父層發生了什麼，這樣資料的流向才會乾淨清晰，所以 Toolbar 就像一個遙控器，它本身不控制清單，只發出信號：「現在要切換到 todo 模式喔！」。

第二層改變：父層接收指令，控制畫面變化，在父層 App.vue 裡，寫了個 handleChangeFilter(next) 函式，當 Toolbar 按鈕被按下時，它就會接收到要切換的篩選條件，接著用一個 computed 來產生新的 visibleTasks，讓畫面只顯示符合條件的任務，讓資料跟視覺動態連動，當 filter 改變時，Vue 自動重新運算可見的任務，不需要我們手動去刷新清單，這就是「響應式」的威力。

第三層改變：讓 URL 同步顯示狀態，除了畫面，也讓篩選條件同步到網址列，這樣做的好處是兩個，第一，重整後不會失去目前的狀態；第二，這個連結可以分享給別人，對方打開時看到的內容就跟我一樣，以前總覺得網址只是用來開網頁，但現在發現，它也能記錄「狀態」，這種小細節，其實就是應用程式級前端的關鍵精神。

第四層改變：統計區也會即時更新，在右上角的統計膠囊列中，原本只會顯示整體的完成率、全部數量，現在可以讓它根據篩選的清單自動更新，切換到「已完成」時，完成率會變成 100%；切到「未完成」，則顯示還剩多少，這個互動小細節讓整體體驗更直覺，不再需要去數，也不需要切頁面，系統會即時告訴我目前狀況。

今天最終畫面長這樣：