详解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 相关文章推荐
jquery中的$(document).ready()与window.onload的区别
Nov 18 Javascript
javascript多种数据类型表格排序代码分析
Sep 11 Javascript
jquery显示和隐藏div特效实例
Feb 27 Javascript
JavaScript获取网页中第一个链接ID的方法
Apr 03 Javascript
JavaScript动态创建div等元素实例讲解
Jan 06 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
详解node字体压缩插件font-spider的用法
Sep 28 Javascript
vue 表单验证按钮事件交由父组件触发的方法
Dec 17 Javascript
微信小程序从注册账号到上架(图文详解)
Jul 17 Javascript
vue 页面跳转的实现方式
Jan 12 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
yii上传文件或图片实例
2014/04/01 PHP
Yii2框架使用计划任务的方法
2016/05/25 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
javascript preload&lazy load
2010/05/13 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
jQuery内容过滤选择器用法分析
2015/02/10 Javascript
javascript结合canvas实现图片旋转效果
2015/05/03 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
mpvue开发音频类小程序踩坑和建议详解
2019/03/12 Javascript
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
js如何实现元素曝光上报
2019/08/07 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
Python学习笔记之if语句的使用示例
2017/10/23 Python
ubuntu系统下使用pm2设置nodejs开机自启动的方法
2018/05/12 NodeJs
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
快速解决docker-py api版本不兼容的问题
2019/08/30 Python
利用python绘制数据曲线图的实现
2020/04/09 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
世界上最大的专业美容用品零售商:Sally Beauty
2017/07/02 全球购物
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
标准自荐信范文
2014/01/29 职场文书
建房协议书
2014/04/11 职场文书
实习生个人总结范文
2015/02/28 职场文书
如何解决php-fpm启动不了问题
2021/11/17 PHP
vue使用watch监听属性变化
2022/04/30 Vue.js
Vite + React从零开始搭建一个开源组件库
2022/06/25 Javascript