[日期选择器] 初始化相关事宜(vue-相关)

54 阅读1分钟
  1. Vue.js 中 props、data、computed、watcher 初始化顺序

initProps -> initMethods -> initData -> initComputed -> initWatch, 源码

data() {
    let data = {
      locale: {
        direction: "ltr",
        format: moment.localeData().longDateFormat("L"),
        separator: " - ",
        applyLabel: "Apply",
        cancelLabel: "Cancel",
        weekLabel: "W",
        customRangeLabel: "Custom Range",
        daysOfWeek: moment.weekdaysMin(),
        monthNames: moment.monthsShort(),
        firstDay: moment.localeData().firstDayOfWeek()
      }
    };
    // TODO 这里的 props 究竟是放在 data 里面进行初始化好,还是放在生命周期中好呢?
    data.inside__monthDate = new Date(this.startDate);
    data.inside__start = new Date(this.startDate);
    data.inside__end = new Date(this.endDate);
    data.inside__hoverStart = new Date(this.startDate);
    data.inside__hoverEnd = new Date(this.endDate);
    data.in_selection = false; // in_selection means whether user click once, if user click once, set value true
    data.open = false;

    // update day names order to firstDay
    if (data.locale.firstDay !== 0) {
      let iterator = data.locale.firstDay;
      while (iterator > 0) {
        data.locale.daysOfWeek.push(data.locale.daysOfWeek.shift());
        iterator--;
      }
    }
    return data;
  },