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 日的下午。
修改後的程式碼:
以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。