1.为什么props在html模板中要使用kebab-case (短横线分隔命名),而在Vue的options里面声明props却要用camelCase (驼峰命名法)?
2.Vue中是如何初始化props属性的?

HTML层面:

在这里插入图片描述

代码层面:

在_init初始化过程中,如果Vue实例有props属性时候,会对props的属性进行遍历操作,把props里的内容(数组、对象)变成Vue实例的props对象中的属性

比如:
props:[beginDate]
会变成
props[beginDate] = {type:null}

props:{a:{name:‘luo’}} 或 props:{name}
会变成
props[a] = {name:‘luo’} 或 props[name] = {type:null}

在这里插入图片描述

相关代码:

src\core\instance\init.js 中的 _init 方法:当判断是Vue实例时候进入到mergeOptions方法中
在这里插入图片描述

mergeOptions在src\core\util\options.js中进行实现
normalizeProps方法则是格式化option中的props

在这里插入图片描述

normalizeProps 函数实现如下
function normalizeProps (options: Object, vm: ?Component) {
  const props = options.props
  if (!props) return
  const res = {}
  let i, val, name
  // 根据props是数组还是对象形式进行不同的遍历处理,都是返回一个res对象
  // camelize 转换props属性名字,把连接字符串形式转换成驼峰式命名
  // isPlainObject 判断是否是对象,返回true or false
  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
    )
  }
  // 处理后的props重新赋值回Vue实例的options.props对象上
  options.props = res
}
Logo

前往低代码交流专区

更多推荐