详解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 相关文章推荐
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
jquery常用函数与方法汇总
Sep 01 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
数组Array的排序sort方法
Feb 17 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
vue解决使用$http获取数据时报错的问题
Oct 30 Javascript
javascript自定义右键菜单插件
Dec 16 Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 Javascript
js实现图片实时时钟
Jan 15 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
Oct 30 Javascript
JS的深浅复制详细
Oct 16 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
PHP Stream_*系列函数
2010/08/01 PHP
php遍历CSV类实例
2015/04/14 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
PHP检测链接是否存在的代码实例分享
2016/05/06 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
Prototype 学习 Prototype对象
2009/07/12 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
2013/11/07 Javascript
jquery实现鼠标拖动图片效果示例代码
2014/01/09 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
js 将图片连接转换成base64格式的简单实例
2016/08/10 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
2017/04/25 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
js实现上下左右键盘控制div移动
2020/01/16 Javascript
[03:03]DOTA2校园争霸赛 济南城市决赛欢乐发奖活动
2013/10/21 DOTA
手把手教你用python抢票回家过年(代码简单)
2018/01/21 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
python搜索算法原理及实例讲解
2020/11/18 Python
DKNY品牌官网:纽约大都会时尚风格
2016/10/20 全球购物
JSF面试题:Jsf中的核心类用那些?有什么作用?LiftCycle六大生命周期是什么?
2014/07/17 面试题
护理专业毕业生自荐信范文
2014/01/05 职场文书
学生党支部先进事迹
2014/02/04 职场文书
文化与传播毕业生求职信
2014/03/09 职场文书
家长通知书家长评语
2014/04/17 职场文书
大学新学期计划书
2014/04/28 职场文书
基层党员对照检查材料
2014/08/25 职场文书
学校会议通知范文
2015/04/15 职场文书
责任书格式
2019/04/18 职场文书
idea下配置tomcat避坑详解
2022/04/12 Servers