2021-11-01：判断所选时间是否在某一时间段、用 key 管理可复用的元素、修饰符、组件、依赖注入、程序化的事件侦听器、异步引入组件

1、判断所选时间是否在某一时间段

// 判断所选时间是否在某一时间段
export function ifTimeRange(beginTime, endTime, nowTime) {
  var strb = beginTime.split(':')
  if (strb.length !== 2) {
    return false
  }

  var stre = endTime.split(':')
  if (stre.length !== 2) {
    return false
  }

  var strn = nowTime.split(':')
  if (stre.length !== 2) {
    return false
  }
  var b = new Date()
  var e = new Date()
  var n = new Date()

  b.setHours(strb[0])
  b.setMinutes(strb[1])
  e.setHours(stre[0])
  e.setMinutes(stre[1])
  n.setHours(strn[0])
  n.setMinutes(strn[1])

  if (n.getTime() - b.getTime() > 0 && n.getTime() - e.getTime() < 0) {
    return true
  } else {
    return false
  }
}

2、用 key 管理可复用的元素

注意：v-show不支持template元素
v-for比v-if具有更高的优先级，即v-if会分别重复运行于每个v-for循环中。

3、修饰符

.lazy修饰符：表单的v-model.lazy，表明在change时而非input时更新。

4、组件

组件的data必须是一个函数（每个vue实例可以维护一份被返回对象的独立的拷贝）
子组件想要自己使用props里面传的值，可以data一个值接收，也可以computed计算。
props可能多个的类型的传递：

propA: {
     type: String | Number,
     default: '350'
},
propB: [String, Number],

组件的属性中，外部的属性会替换掉内部的属性，如：type。class跟style会合并。组件内如果不想继承属性，可以设置inheritAttrs值为false。

自定义组件的 v-model。

.sync 修饰符。

5、依赖注入

后代组件使用
父：

provide(){
  return {
    xxx:xxxx
  }
}

后：

inject: ['xxx'],

6、 程序化的事件侦听器

7、异步引入组件

组件循环使用时，可以通过components中引入异步import来调用。

components: {
  xxx: () => import('./xxxxx')
}