2 回答
TA貢獻2051條經驗 獲得超10個贊
我解釋一下上面關于computed的評論吧Vue是響應式的,這就意味著一個好的設計模式是只保存源數據,進一步的變換交給框架。換言之,就是不增加沒有必要的狀態。所以我的建議是把datafilter放到computed里面。
{
data() {
return {
datalist: [],
// filter就應該存filter,如果按原來的邏輯,應該叫filteredDataList
// 其實我更喜歡selectedDate,更加明確
// datafilter: null,
selectedDate: null,
}
},
computed: {
filteredDatalist() {
if (this.selectedDate) {
return this.datalist.filter(({ recoverTime }) => recoverTime === this.selectedDate);
}
else {
return this.datalist;
}
}
},
methods: {
getData() {
this.$get('接口地址', 請求參數)
.then(response => {
this.datalist = response
})
.catch(error => {
});
},
clickDay(date) {
var a = date.split('/');
// 用樓上的方式更優雅一些
this.selectedDate = a[0] + '-' + (a[1] < 10 ? '0' : '') + a[1] + '-' + (a[2] < 10 ? '0' : '') + a[2];
},
},
}
好處都有啥?誰說對了就給他
解開了計算過程和點擊按鈕的耦合。假如以后想要加上前一天/后一天的功能,只需要寫日期加減本身的代碼,不用再復制粘貼計算過程了;
解開了
datalist生命周期的限制。假如以后想要加上datalist實時更新的功能,只需要定時getData就行了(或者用websocket,不論是啥),不需要用戶觸發clickDay就能自動刷新;Vue會智能地管理
computed屬性的緩存,如果用戶clickDay兩次都相同,只會計算一次。
其實這種思想已經很函數式了,相當像Rx。但是Vue的學習成本比Rx低得多,這么簡單就能用上函數式,何樂不為?
TA貢獻1802條經驗 獲得超4個贊
我就覺得這兩句可以換一個優雅點的方式
var a = data.split('/');
var b = a[0] + '-' + (a[1] < 10 ? '0':'') + a[1]+'-'+ (a[2] < 10 ? '0':'')+a[2];
改為
// 如果你的數據結構是2018/07/26,為什么還要去判斷加0,直接用replace替換不好嗎
// data.replace(/\//g, '-')
// 加0寫法
const b = `${a[0]}-${a[1].padStart(2, '0')}-${a[2].padStart(2, '0')}`;
添加回答
舉報
