255. 日期选择器：calendar 的月份 与 选择日期之间的关系

[ly525]

思路

当传入 Start 和 End 的时候，左右两边的日期一般是根据 Start 的日期进行确认的

<md-date-range-picker start="2018-01-01" end="2018-01-06"></md-date-range-picker>

这时候，这样 inside__leftCalendarMonth = moment(this.startDate) 是没问题的，这样左侧的 Calendar 就能根据 月份 渲染对应的日历了 renderCalendar

但有一个问题，当选择快捷键中的 Last Month，以及 根据 先从左侧 Calendar 选择 End，点击前一个月，选择 Start，此时 leftCalendar 需要根据 用户选择的 inside__start 来做更新了，就需要使用计算属性了，而不是在 data 中进行初始化。

computed: {
    /**
     * 需要声明为 computed prop 的原因：点击快捷键 Last Month 的时候，需要更新左侧的日历，让其切换到上个月份
     * 写在 data 里面的效果如下：
     */
    inside__leftCalendarMonth: {
      get () {
        return this.inside__start.clone();
      },
      set () {
        // 这里啥都不能干，所以通过计算属性就没有意义了
      },
    }
},
methods: {
    clickNextMonth() {
      // TODO 如果有 linkedCalendars，需要更新代码
      // moment.js 的 add 和 sub tract 的改变自身的行为没有被 watch 到，原因是什么呢？
      this.inside__leftCalendarMonth = this.inside__leftCalendarMonth.clone().add(1, 'month');
    },
    clickPrevMonth() {
      // TODO 如果有 linkedCalendars，需要更新代码
      this.inside__leftCalendarMonth = this.inside__leftCalendarMonth.clone().subtract(1, 'month')
    },
}

但是发现计算属性适合使用在 点击了 左侧快捷键 以及 点击了某个日期 作为 Start，再点一次作为 End的时候，但是不适合 clickPrevMonth 和 clickNextMonth 的时候（也就是点击第一次 作为 End，然后点击了 PrevMonth，找一个日期作为 Start。这时候 Start 就会需要更新到右边 Calendar，也就是需要通过计算属性，来更新 rightCalendarMonth），此时发现计算属性的 set 里面不知道该做什么合适了。因此使用watch 更为合适！
更合适的做法

data: () => ({
   inside__leftCalendarMonth: moment(this.startDate),
}),
watch: {
  inside__start (value) {
    this.inside__leftCalendarMonth = value.clone();
  },
}