頁面首次加載所有數(shù)據(jù)與點(diǎn)擊當(dāng)前日期展示過濾之后的數(shù)據(jù)思路

我解釋一下上面關(guān)于computed的評論吧

Vue是響應(yīng)式的，這就意味著一個好的設(shè)計模式是只保存源數(shù)據(jù)，進(jìn)一步的變換交給框架。換言之，就是不增加沒有必要的狀態(tài)。所以我的建議是把datafilter放到computed里面。

{
    data() {
        return {
            datalist: [],
            // filter就應(yīng)該存filter，如果按原來的邏輯，應(yīng)該叫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('接口地址', 請求參數(shù))
                .then(response => {
                    this.datalist = response
                })
                .catch(error => {
                });
        },

        clickDay(date) {
            var a = date.split('/');
            // 用樓上的方式更優(yōu)雅一些
            this.selectedDate = a[0] + '-' + (a[1] < 10 ? '0' : '') + a[1] + '-' + (a[2] < 10 ? '0' : '') + a[2];
        },
    },
}

好處都有啥？誰說對了就給他

1. 解開了計算過程和點(diǎn)擊按鈕的耦合。假如以后想要加上前一天/后一天的功能，只需要寫日期加減本身的代碼，不用再復(fù)制粘貼計算過程了；
2. 解開了datalist生命周期的限制。假如以后想要加上datalist實時更新的功能，只需要定時getData就行了（或者用websocket，不論是啥），不需要用戶觸發(fā)clickDay就能自動刷新；
3. Vue會智能地管理computed屬性的緩存，如果用戶clickDay兩次都相同，只會計算一次。

其實這種思想已經(jīng)很函數(shù)式了，相當(dāng)像Rx。但是Vue的學(xué)習(xí)成本比Rx低得多，這么簡單就能用上函數(shù)式，何樂不為？

我就覺得這兩句可以換一個優(yōu)雅點(diǎn)的方式

var a = data.split('/');
var b = a[0] + '-' + (a[1] < 10 ? '0':'') + a[1]+'-'+ (a[2] < 10 ? '0':'')+a[2];

改為

// 如果你的數(shù)據(jù)結(jié)構(gòu)是2018/07/26,為什么還要去判斷加0，直接用replace替換不好嗎
// data.replace(/\//g, '-')
// 加0寫法
const b = `${a[0]}-${a[1].padStart(2, '0')}-${a[2].padStart(2, '0')}`;