详解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 相关文章推荐
GreyBox技术总结(转)
Nov 23 Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
JavaScript对象数组的排序处理方法
Oct 21 Javascript
JSON遍历方式实例总结
Dec 07 Javascript
微信小程序 本地数据存储实例详解
Apr 13 Javascript
JavaScript中 ES6变量的结构赋值
Jul 10 Javascript
微信小程序使用gitee进行版本管理
Sep 20 Javascript
three.js 制作动态二维码的示例代码
Jul 31 Javascript
JS实现页面侧边栏效果探究
Jan 08 Javascript
React 高阶组件HOC用法归纳
Jun 13 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的PDO常用类库实例分析
2016/04/07 PHP
Yii2中关联查询简单用法示例
2016/08/10 PHP
PHP封装的多文件上传类实例与用法详解
2017/02/07 PHP
List all the Databases on a SQL Server
2007/06/21 Javascript
动态加载外部javascript文件的函数代码分享
2011/07/28 Javascript
javascript中关于break,continue的特殊用法与介绍
2012/05/24 Javascript
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
javascript避免数字计算精度误差的方法详解
2014/03/05 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
JavaScript修改作用域外变量的方法
2016/03/25 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
2016/11/21 Javascript
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
微信公众号服务器验证Token步骤图解
2019/12/30 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
详解Vue3.0 + TypeScript + Vite初体验
2021/02/22 Vue.js
python生成随机mac地址的方法
2015/03/16 Python
python绘制立方体的方法
2018/07/02 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
Python OpenCV实现视频分帧
2019/06/01 Python
关于python3中setup.py小概念解析
2019/08/22 Python
Python坐标线性插值应用实现
2019/11/13 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
浅谈在JupyterNotebook下导入自己的模块的问题
2020/04/16 Python
Django执行源生mysql语句实现过程解析
2020/11/12 Python
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
乡镇党员群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
通知格式
2015/04/27 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书
使用Selenium实现微博爬虫(预登录、展开全文、翻页)
2021/04/13 Python
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers
详解Vue router路由
2021/11/20 Vue.js
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers