从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 相关文章推荐
dreamweaver 安装Jquery智能提示
Apr 02 Javascript
js实现的折叠导航示例
Nov 29 Javascript
JS数组去重与取重的示例代码
Jan 24 Javascript
jQuery中prop()方法用法实例
Jan 05 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
Sep 21 Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 Javascript
ReactJs设置css样式的方法
Jun 08 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 Javascript
原生JavaScript实现弹幕组件的示例代码
Oct 12 Javascript
JS跨浏览器解析XML应用过程详解
Oct 16 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图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
IE与Firefox下javascript getyear年份的兼容性写法
2007/12/20 Javascript
JQuery Ajax 跨域访问的解决方案
2010/03/12 Javascript
基于jQuery的弹出框插件
2012/03/18 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
plupload+artdialog实现多平台上传文件
2016/07/19 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
vue根据条件不同显示不同按钮的操作
2020/08/04 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
分享15个最受欢迎的Python开源框架
2014/07/13 Python
Python中字典创建、遍历、添加等实用操作技巧合集
2015/06/02 Python
python各种语言间时间的转化实现代码
2016/03/23 Python
Python+PIL实现支付宝AR红包
2018/02/09 Python
python矩阵的转置和逆转实例
2018/12/12 Python
Python函数中不定长参数的写法
2019/02/13 Python
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
2020/03/08 Python
python 中的9个实用技巧,助你提高开发效率
2020/08/30 Python
python爬虫利用代理池更换IP的方法步骤
2021/02/21 Python
英语专业推荐信
2013/11/16 职场文书
英语专业学生的自我评价
2013/12/30 职场文书
家电业务员岗位职责
2014/03/10 职场文书
公休请假条
2014/04/11 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
党支部组织生活会整改方案
2014/09/30 职场文书
关于感谢信的范文
2015/01/23 职场文书
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python
MySQL令人大跌眼镜的隐式转换
2021/08/23 MySQL
利用JuiceFS使MySQL 备份验证性能提升 10 倍
2022/03/17 MySQL
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技