Vue 初心者筆記 #22 元件變換(下)

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

我修改了哪些地方

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

資料改為使用 Computed 回傳

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

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

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

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

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

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

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

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

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

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

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

實作成果 Demo

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

修改後的程式碼:

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