详解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 动态调整图片尺寸实现代码
Dec 28 Javascript
JavaScript 学习笔记(十六) js事件
Feb 01 Javascript
js select常用操作控制代码
Mar 16 Javascript
javascript发送短信验证码实现代码
Nov 12 Javascript
实例讲解JavaScript中的this指向错误解决方法
Jun 13 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
Apr 22 Javascript
jQuery插件jsonview展示json数据
May 26 jQuery
微信小程序登录换取token的教程
May 31 Javascript
express框架中使用jwt实现验证的方法
Aug 25 Javascript
Vue.extend 编程式插入组件的实现
Nov 18 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 Javascript
详解js中的原型,原型对象,原型链
Jul 16 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
ThinkPHP CURD方法之order方法详解
2014/06/18 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
关于laravel5.5的定时任务详解(demo)
2019/10/23 PHP
新老版本juqery获取radio对象的方法
2010/03/01 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
AngularJS入门教程之控制器详解
2016/07/27 Javascript
BootStrap的table表头固定tbody滚动的实例代码
2016/08/24 Javascript
js eval函数使用,js对象和字符串互转实例
2017/03/06 Javascript
vue通过watch对input做字数限定的方法
2017/07/13 Javascript
使用store来优化React组件的方法
2017/10/23 Javascript
Vue打包后出现一些map文件的解决方法
2018/02/13 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
vuex state及mapState的基础用法详解
2018/04/19 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
leaflet加载geojson叠加显示功能代码
2020/02/21 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
python中OrderedDict的使用方法详解
2017/05/05 Python
PyQt5通信机制 信号与槽详解
2019/08/07 Python
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
HTML5 Convas APIs方法详解
2015/04/24 HTML / CSS
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
大专应届生个人简历的自我评价
2013/10/15 职场文书
顶岗实习协议书
2015/01/29 职场文书
英语辞职信范文
2015/02/28 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
vue2实现provide inject传递响应式
2021/05/21 Vue.js
Python自动化工具之实现Excel转Markdown表格
2022/04/08 Python
python数字图像处理:图像简单滤波
2022/06/28 Python