美文网首页
配置项多种写法的实现

配置项多种写法的实现

作者: 茂茂爱吃鱼 | 来源:发表于2018-11-26 17:39 被阅读0次

    Vue 是如何实现配置选项多种写法的,如 props inject 等选项既支持数组 + 字符串写法也支持对象写法。
    看了源码发现有一个格式化的过程,不管是哪种类型的写法,最后都会格式化为统一的形式。
    附上 props inject 格式化代码

    /**
     * Ensure all props option syntax are normalized into the
     * Object-based format.
     */
    function normalizeProps (options: Object, vm: ?Component) {
      const props = options.props
      if (!props) return
      const res = {}
      let i, val, name
      if (Array.isArray(props)) {
        i = props.length
        while (i--) {
          val = props[i]
          if (typeof val === 'string') {
            name = camelize(val)
            res[name] = { type: null }
          } else if (process.env.NODE_ENV !== 'production') {
            warn('props must be strings when using array syntax.')
          }
        }
      } else if (isPlainObject(props)) {
        for (const key in props) {
          val = props[key]
          name = camelize(key)
          res[name] = isPlainObject(val)
            ? val
            : { type: val }
        }
      } else if (process.env.NODE_ENV !== 'production') {
        warn(
          `Invalid value for option "props": expected an Array or an Object, ` +
          `but got ${toRawType(props)}.`,
          vm
        )
      }
      options.props = res
    }
    
    /**
     * Normalize all injections into Object-based format
     */
    function normalizeInject (options: Object, vm: ?Component) {
      const inject = options.inject
      if (!inject) return
      const normalized = options.inject = {}
      if (Array.isArray(inject)) {
        for (let i = 0; i < inject.length; i++) {
          normalized[inject[i]] = { from: inject[i] }
        }
      } else if (isPlainObject(inject)) {
        for (const key in inject) {
          const val = inject[key]
          normalized[key] = isPlainObject(val)
            ? extend({ from: key }, val)
            : { from: val }
        }
      } else if (process.env.NODE_ENV !== 'production') {
        warn(
          `Invalid value for option "inject": expected an Array or an Object, ` +
          `but got ${toRawType(inject)}.`,
          vm
        )
      }
    }
    

    相关文章

      网友评论

          本文标题:配置项多种写法的实现

          本文链接:https://www.haomeiwen.com/subject/anqrqqtx.html