Vue 初心者筆記 #22 元件變換（下）

上次完成作業後有些地方建議修改，像是以 computed 傳資料提升網頁效能等等，這些修改都會在本文中做講解。

我修改了哪些地方

在開始之前，先附上我做為參考的範例程式碼，
這次的修正建議與參考範例，是由六角學院助教 Yuko 提供。

資料改為使用 Computed 回傳

關注城市和所有城市的資料，建議改為使用 computed 來回傳要顯示的資料（原本是使用 method）。

使用 computed 的話，只有當 data 的資料有更新時，computed 裡面的資料才會變動，網頁效能也會比較好。

可參考助教提供範例的 76 ~ 89 行（filterData 所有城市、staredData 關注城市）

卡片顏色樣式改寫至 Vue.component 裡面

我們將卡片顏色的樣式，從元件上面一個個的 v-if 條件判斷式，改為撰寫在 Vue.component 的 method 裡面，以提升元件的效能。

可參考範例 JavaScript 部分的第 5 行

在所有城市中移除已關注城市

舊版本中，我們在關注了某個地區之後，在所有城市的卡片列表裡面依然會出現那筆資料，而且呈現為「空星」的狀態。

這點在使用者體驗上不盡理想，因此，我們應該做出修正，
當所有城市被關注時，可以將下方對應的城市移除，或是呈現實心狀態。

以移除城市為例，當「所有城市」裡面有「已經關注的城市」時，應該要把下方對應的城市移除。

在範例中 filterData 的 81 ~ 84 行有提到移除城市的效果
如果要「星星皆為實心的」也可參考這個範例

實作成果 Demo

完成這個修改 Demo 的時間大約是收到修改建議的當天下午吧，也就是 2019 年 11 月 22 日的下午。

修改後的程式碼：

以上資源是我自己整理過後的筆記，若有錯誤歡迎隨時和我聯繫。