从vue源码看props的用法


Posted in Javascript onJanuary 09, 2019

前言

平时写vue的时候知道 props 有很多种用法,今天我们来看看vue内部是怎么处理 props 中那么多的用法的。

vue提供的props的用法

1. 数组形式

props: ['name', 'value']

2. 对象形式

对象形式内部也提供了三种写法:

props: {
 // 基础的类型检查
 name: String,
 // 多个可能的类型
 value: [String, Number],
 // 对象形式
 id: {
  type: Number,
  required: true
 }
}

props实现的原理

function normalizeProps (options: Object, vm: ?Component) {
 const props = options.props
 if (!props) return
 const res = {}
 let i, val, name
 if (Array.isArray(props)) {
 ...
 } else if (isPlainObject(props)) {
 ...
 } else if (process.env.NODE_ENV !== 'production') {
 ...
 }
 options.props = res
}

normalizeProps 函数就是vue实际处理 props 的地方,从函数名的翻译我们可以看出该函数的功能就是标准化 props 的值。该函数主要分成3部分:① 从 options 对象中获取 props 的值并且定义一个res空对象;②几个 if ... else ,分别根据 props 值的不同类型来处理 res 对象;③ 用处理后的 res 对象覆盖原来 options 对象的 props 属性的值。

接下来看看那几个 if ... else 的代码:

if (Array.isArray(props)) {
 i = props.length
 while (i--) {
  val = props[i]
  if (typeof val === 'string') {
  name = camelize(val)
  res[name] = { type: null }
  } else if (process.env.NODE_ENV !== 'production') {
  warn('props must be strings when using array syntax.')
  }
 }
 }

这个代码实际就是处理props的值为数组的情况,例如: props: ['name', 'value'] 。使用while遍历该数组,如果数组内元素的类型不是字符串并且不是生产环境,那么就抛错:‘props的值类型为数组时,数组里面的元素的类型就必须是字符串'。如果是字符串的情况下,使用 camelize 函数处理一下 val 的值,并且赋值给 name 变量。这里的 camelize 函数的实际作用就是将 '-' 转换为驼峰。 camelize 函数具体的实现方式在后面分析。然后在 res 对象上面添加一个为 name 变量的属性,该属性的值为空对象 { type: null } 。

props: ['name', 'value'] 这种写法经过上面的处理后就会变成了下面这样:

props: {
 name: {
  type: null
 },
 value: {
  type: null
 }
}

接下来看看下面这个 else if(isPlainObject(props)) ,这里的 isPlainObject 函数实际就是返回 props 的值是否为 object , isPlainObject 函数的具体实现我们也在后面分析。

else if (isPlainObject(props)) {
 for (const key in props) {
  val = props[key]
  name = camelize(key)
  res[name] = isPlainObject(val)
  ? val
  : { type: val }
 }
 }

使用 for...in 遍历props对象,和上面一样使用 camelize 函数将 '-' 转换为驼峰。这里有个三目运算:

res[name] = isPlainObject(val) ? val : { type: val }

判断了一下 val 如果是 object ,那么在res对象上面添加一个为name变量的属性,并且将该属性的值设置为val。这个其实就是处理下面这种props的写法:

props: {
 // 对象形式
 id: {
  type: Number,
  required: true
 }
}

如果 val 不是 object ,那么也在res对象上面添加一个为name变量的属性,并且将该属性的值设置为{ type: val }。这个其实就是处理下面这种props的写法:

props: {
 // 基础的类型检查
 name: String,
 // 多个可能的类型
 value: [String, Number],
}

经过处理后props会变成了下面这样:

props: {
 name: {
  type: String
 },
 value: {
  type: [String, Number]
 }
}

所以不管我们使用vue提供的 props 哪种写法,最终vue都会帮我们转换成下面这种类型:

props: {
 name: {
  ...,
  type: '类型'
 }
}

接下来看看上面提到的util函数 isPlainObject ,先把源码贴出来。

const _toString = Object.prototype.toString

export function isPlainObject (obj: any): boolean {
 return _toString.call(obj) === '[object Object]'
}

其实 Object.prototype.toString.call(obj) 的值为obj对象的类型。例如:

Object.prototype.toString.call({a: 1})  // [object Object]
Object.prototype.toString.call(new Date) // [object Date]
Object.prototype.toString.call([1])   // [object Array]
Object.prototype.toString.call(null)  // [object Null]

接下来看看上面提到的util函数 camelize ,还是先把源码贴出来。

export function cached<F: Function> (fn: F): F {
 const cache = Object.create(null)
 return (function cachedFn (str: string) {
 const hit = cache[str]
 return hit || (cache[str] = fn(str))
 }: any)
}

const camelizeRE = /-(\w)/g
export const camelize = cached((str: string): string => {
 return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '')
})

这里定义了两个函数,分别是 cached 和 camelize ,其中 camelize 就是我们上面调用的, cached 是在 camelize 函数内部调用的。

我们先来看看 camelize 函数,其实 camelize 函数就是执行 cached 后返回的一个函数。调用 cached 时传入了一个箭头函数,箭头函数内部是调用了正则的 replace 方法,将传入的 str 变量中匹配 /-(\w)/g 的变成大写字母,并且返回 replace 后的值。(也就是将 - 转换成驼峰)。

再来看看 cached 函数,该函数传入的变量其实就是 camelize 那里的箭头函数,首先定义了一个 cache 空对象,然后直接返回了 cachedFn 函数。我们在外部调用 camelize(key) 时,其实就是执行了这里的了 cachedFn 函数, str 的值就是传入的 key 的值。很明显这里是一个闭包,可以在外部调用 camelize 函数的时候可以修改或者读取这里定义的 cache 对象的值。获取 cache 对象中 key 为 str 变量值的属性值赋值给 hit 变量。如果有hit变量的值,那么就直接返回hit的值,如果没有就执行 camelize 传入的箭头函数,并且将箭头函数的返回值赋值给 catche 对象的 str 属性。如果下次调用 camelize 函数时传入了相同的 str ,那么就不会执行箭头函数,直接返回闭包中的 cache 对象的 str 属性的值。这里是性能优化的一种手段。

例如:第一次调用 camelize('name') 后, cache 对象的值就变成了{name: 'name'}。然后在其他地方再次调用 camelize('name') 时再次执行 cachedFn 函数,此时 hit 变量的值为'name'。直接返回 hit 变量的值,不会执行传入的箭头函数。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中filter(),not(),split()使用方法
Jul 06 Javascript
基于jquery的给文章加入关键字链接
Oct 26 Javascript
js实现div拖动动画运行轨迹效果代码分享
Aug 27 Javascript
js解决movebox移动问题
Mar 29 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
Nov 03 Javascript
jQuery UI插件实现百度提词器效果
Nov 21 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 Javascript
js自定义QQ菜单效果
Jan 10 Javascript
详解使用webpack打包编写一个vue-toast插件
Nov 08 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 Javascript
解决vue初始化项目一直停在downloading template的问题
Nov 09 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 #Javascript
vue-cli2 构建速度优化的实现方法
Jan 08 #Javascript
一个因@click.stop引发的bug的解决
Jan 08 #Javascript
JavaScript学习笔记之图片库案例分析
Jan 08 #Javascript
JavaScript学习笔记之DOM操作实例分析
Jan 08 #Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
Jan 08 #Javascript
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 #Javascript
You might like
php开发环境配置记录
2011/01/14 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
JavaScript布尔运算符原理使用解析
2020/05/06 Javascript
微信公众号网页分享功能开发的示例代码
2020/05/27 Javascript
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
Python基于TCP实现会聊天的小机器人功能示例
2018/04/09 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
如何在Django中设置定时任务的方法示例
2019/01/18 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
python super函数使用方法详解
2020/02/14 Python
python实现可下载音乐的音乐播放器
2020/02/25 Python
windows10 pycharm下安装pyltp库和加载模型实现语义角色标注的示例代码
2020/05/07 Python
CSS3中的opacity属性使用教程
2015/08/19 HTML / CSS
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
DNA测试:Orig3n
2019/03/01 全球购物
mysql有关权限的表都有哪几个
2015/04/22 面试题
数据管理员的自我评价分享
2013/11/15 职场文书
鼓舞士气的口号
2014/06/16 职场文书
优秀家长自荐材料
2014/08/26 职场文书
大学军训决心书
2015/02/05 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
信息技术国培研修日志
2015/11/13 职场文书
话题作文之学会尊重
2019/12/16 职场文书
ORACLE数据库应用开发的三十个注意事项
2021/06/07 Oracle
Opencv实现二维直方图的计算及绘制
2021/07/21 Python