详解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 相关文章推荐
filters.revealTrans.Transition使用方法小结
Aug 19 Javascript
js中匿名函数的N种写法
Sep 08 Javascript
Jquery图片滚动与幻灯片的实例代码
Apr 08 Javascript
express的中间件basicAuth详解
Dec 04 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
Mar 09 Javascript
BACKBONE.JS 简单入门范例
Oct 17 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
Nuxt.js实战和配置详解
Aug 05 Javascript
JS script脚本中async和defer区别详解
Jun 24 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 Javascript
JavaScript中展开运算符及应用的实例代码
Jan 14 Javascript
Vue项目打包部署到apache服务器的方法步骤
Feb 01 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中static关键字原理的学习研究分析
2011/07/18 PHP
PHP利用str_replace防注入的方法
2013/11/10 PHP
php sybase_fetch_array使用方法
2014/04/15 PHP
smarty中post用法实例
2014/11/28 PHP
ThinkPHP模版中导入CSS和JS文件的方法
2014/11/29 PHP
PHP4和PHP5版本下解析XML文档的操作方法实例分析
2017/05/20 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
2011/12/06 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
jQuery中not()方法用法实例
2015/01/06 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
Python内置模块logging用法实例分析
2018/02/12 Python
在python中pandas的series合并方法
2018/11/12 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
python的pygal模块绘制反正切函数图像方法
2019/07/16 Python
python BlockingScheduler定时任务及其他方式的实现
2019/09/19 Python
Pytorch高阶OP操作where,gather原理
2020/04/30 Python
Python基于Tkinter编写crc校验工具
2020/05/06 Python
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
Ajax和javascript的区别
2013/07/20 面试题
中文教师求职信
2014/02/22 职场文书
幼儿园毕业园长感言
2014/02/24 职场文书
幼儿教师暑期培训方案
2014/08/27 职场文书
毕业证委托书范文
2014/09/26 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
2016中秋晚会开幕词
2016/03/03 职场文书