详解Vue内部怎样处理props选项的多种写法


Posted in Javascript onNovember 06, 2018

开发过程中,props 的使用有两种写法:

// 字符串数组写法
const subComponent = {
 props: ['name']
}
// 对象写法
const subComponent = {
 props: {
  name: {
   type: String,
   default: 'Kobe Bryant'
  }
 }
}

Vue在内部会对 props 选项进行处理,无论开发时使用了哪种语法,Vue都会将其规范化为对象的形式。具体规范方式见Vue源码 src/core/util/options.js 文件中的 normalizeProps 函数:

/**
 * Ensure all props option syntax are normalized into the
 * Object-based format.(确保将所有props选项语法规范为基于对象的格式)
 */
 // 参数的写法为 flow(https://flow.org/) 语法
function normalizeProps (options: Object, vm: ?Component) {
 const props = options.props
 // 如果选项中没有props,那么直接return
 if (!props) return
 // 如果有,开始对其规范化
 // 声明res,用于保存规范化后的结果
 const res = {}
 let i, val, name
 if (Array.isArray(props)) {
  // 使用字符串数组的情况
  i = props.length
  // 使用while循环遍历该字符串数组
  while (i--) {
   val = props[i]
   if (typeof val === 'string') {
    // props数组中的元素为字符串的情况
    // camelize方法位于 src/shared/util.js 文件中,用于将中横线转为驼峰
    name = camelize(val)
    res[name] = { type: null }
   } else if (process.env.NODE_ENV !== 'production') {
    // props数组中的元素不为字符串的情况,在非生产环境下给予警告
    // warn方法位于 src/core/util/debug.js 文件中
    warn('props must be strings when using array syntax.')
   }
  }
 } else if (isPlainObject(props)) {
  // 使用对象的情况(注)
  // isPlainObject方法位于 src/shared/util.js 文件中,用于判断是否为普通对象
  for (const key in props) {
   val = props[key]
   name = camelize(key)
   // 使用for in循环对props每一个键的值进行判断,如果是普通对象就直接使用,否则将其作为type的值
   res[name] = isPlainObject(val)
    ? val
    : { type: val }
  }
 } else if (process.env.NODE_ENV !== 'production') {
  // 使用了props选项,但它的值既不是字符串数组,又不是对象的情况
  // toRawType方法位于 src/shared/util.js 文件中,用于判断真实的数据类型
  warn(
   `Invalid value for option "props": expected an Array or an Object, ` +
   `but got ${toRawType(props)}.`,
   vm
  )
 }
 options.props = res
}

如此一来,假如我的 props 是一个字符串数组:

props: ["team"]

经过这个函数之后,props 将被规范为:

props: {
 team:{
  type: null
 }
}

假如我的 props 是一个对象:

props: {
 name: String,
 height: {
  type: Number,
  default: 198
 }
}

经过这个函数之后,将被规范化为:

props: {
 name: {
  type: String
 },
 height: {
  type: Number,
  default: 198
 }
}

注:对象的写法也分为以下两种,故仍需进行规范化

props: {
 // 第一种写法,直接写类型
 name: String,
 // 第二种写法,写对象
 name: {
  type: String,
  default: 'Kobe Bryant'
 }
}

最终会被规范为第二种写法。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
java script编程起步(第三课)
Jan 10 Javascript
JavaScript类和继承 constructor属性
Mar 04 Javascript
jQuery1.6 使用方法一
Nov 23 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
Jan 15 Javascript
在图片上显示左右箭头类似翻页的代码
Mar 04 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
Jan 24 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
Jun 06 Javascript
30分钟快速掌握Bootstrap框架
May 24 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
May 16 Javascript
使用JavaScript实现node.js中的path.join方法
Aug 12 Javascript
JS实现时间校验的代码
May 25 Javascript
微信小程序实现选项卡效果
Nov 06 #Javascript
Vue props 单向数据流的实现
Nov 06 #Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 #Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
Nov 06 #Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 #Javascript
vue项目上传Github预览的实现示例
Nov 06 #Javascript
React Component存在的几种形式详解
Nov 06 #Javascript
You might like
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
php获取数组元素中头一个数组元素值的实现方法
2014/12/20 PHP
php使用gzip压缩传输js和css文件的方法
2015/07/29 PHP
Yii2单元测试用法示例
2016/11/12 PHP
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
jquery动态赋值id与动态取id方法示例
2017/08/21 jQuery
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
2019/10/26 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
Python判断列表是否已排序的各种方法及其性能分析
2016/06/20 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
python解释器安装教程的方法步骤
2020/07/02 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
极简的HTML5模版
2015/07/09 HTML / CSS
兰芝美国网上商城:购买LANEIGE睡眠面膜等
2017/06/30 全球购物
介绍一下Ruby的特点
2013/01/20 面试题
学生发电厂实习自我鉴定
2013/09/22 职场文书
超市5.1促销活动
2014/01/15 职场文书
寒假实习自荐信
2014/01/26 职场文书
普罗米修斯教学反思
2014/02/06 职场文书
安全生产中长期规划实施方案
2014/02/21 职场文书
创建文明学校实施方案
2014/03/11 职场文书
安全生产管理责任书
2014/04/16 职场文书
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
工作经验交流材料
2014/12/30 职场文书
python中print格式化输出的问题
2021/04/16 Python
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS
详解Java实践之建造者模式
2021/06/18 Java/Android