详解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 相关文章推荐
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
Jan 15 Javascript
js控制frameSet示例
Sep 10 Javascript
js自动查找select下拉的菜单并选择(示例代码)
Feb 26 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
Mar 25 Javascript
Jquery实现鼠标移动放大图片功能实例
Mar 25 Javascript
在js中实现邮箱格式的验证方法(推荐)
Oct 24 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
Jul 11 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
Aug 10 Javascript
JS实现的雪花飘落特效示例
Dec 03 Javascript
微信小程序:报错(in promise) MiniProgramError
Oct 30 Javascript
浅谈Ant Design Pro 菜单自定义 icon
Nov 17 Javascript
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
微信小程序实现选项卡效果
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的五种设计模式
2012/09/05 PHP
laravel 数据验证规则详解
2019/10/23 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
js null undefined 空区别说明
2010/06/13 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
JS原型、原型链深入理解
2016/02/27 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
实用jquery操作表单元素的简单代码
2016/07/04 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
jquery animate动画持续运动的实例
2017/11/29 jQuery
vue 本地服务不能被外部IP访问的完美解决方法
2018/10/29 Javascript
点击按钮弹出模态框的一系列操作代码实例
2019/03/29 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
微信小程序实现点击效果
2019/06/21 Javascript
js实现百度淘宝搜索功能
2020/02/17 Javascript
[02:47]DOTA2亚洲邀请赛 HR战队出场宣传片
2015/02/07 DOTA
Python实现保证只能运行一个脚本实例
2015/06/24 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
python3判断url链接是否为404的方法
2018/08/10 Python
python读取指定字节长度的文本方法
2019/08/27 Python
Python二元算术运算常用方法解析
2020/09/15 Python
Python基于Faker假数据构造库
2020/11/30 Python
Python就将所有的英文单词首字母变成大写
2021/02/12 Python
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
aden + anais英国官网:美国婴儿贴身用品品牌
2019/09/08 全球购物
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
女娲补天教学反思
2014/02/05 职场文书
致裁判员加油稿
2014/02/08 职场文书
2014年3.15团委活动总结
2014/03/16 职场文书
525心理活动总结
2014/07/04 职场文书
财务审计整改报告
2014/11/06 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang
Go语言入门exec的基本使用
2022/05/20 Golang