详解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 ui1.7 dialog只能弹出一次问题
Aug 27 Javascript
利用JS自动打开页面上链接的实现代码
Sep 25 Javascript
JavaScript常用对象的方法和属性小结
Jan 24 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
Mar 26 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
浅谈jQuery双事件多重加载的问题
Oct 05 Javascript
bootstrap弹出层的多种触发方式
May 10 Javascript
微信小程序实现倒计时60s获取验证码
Apr 17 Javascript
vue实现简单的MVVM框架
Aug 05 Javascript
浅谈webpack性能榨汁机(打包速度优化)
Jan 09 Javascript
JavaScript语句错误throw、try及catch实例解析
Aug 18 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
Oct 27 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用数组返回无限分类的列表数据的代码
2010/08/08 PHP
php park、unpark、ord 函数使用方法(二进制流接口应用实例)
2010/10/19 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
php绘制一个矩形的方法
2015/01/24 PHP
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
php相对当前文件include其它文件的方法
2015/03/13 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
php strftime函数的详细用法
2018/06/21 PHP
Js动态创建div
2008/09/25 Javascript
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
node.js中的http.createServer方法使用说明
2014/12/14 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
三个js循环的关键字示例(for与while)
2016/02/16 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
2018/03/01 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
基于Fixed定位的框选功能的实现代码
2019/05/13 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
python 爬虫 批量获取代理ip的实例代码
2018/05/22 Python
python生成器与迭代器详解
2019/01/01 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
2020/03/06 Python
VELTRA台湾:世界自由行专家
2017/08/15 全球购物
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
nohup的用法
2012/11/26 面试题
几个常见的消息中间件(MOM)
2014/01/08 面试题
新党章心得体会
2014/09/04 职场文书
会议开幕词
2015/01/28 职场文书
高中团支书竞选稿
2015/11/21 职场文书
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS
Win11 25163.1010更新补丁KB5016904推送,测试服务验证管道(附更新修复汇总)
2022/07/23 数码科技