从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 相关文章推荐
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
A标签中通过href和onclick传递的this对象实现思路
Apr 19 Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 Javascript
js实现仿Discuz文本框弹出层效果
Aug 13 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
Dec 25 Javascript
jQuery UI库中dialog对话框功能使用全解析
Apr 23 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
Jun 17 Javascript
javaScript字符串工具类StringUtils详解
Dec 08 Javascript
JavaScript 中使用 Generator的方法
Dec 29 Javascript
vue中引用swiper轮播插件的教程详解
Aug 16 Javascript
在layui中select更改后生效的方法
Sep 05 Javascript
vue更改数组中的值实例代码详解
Feb 07 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中判断数组是一维,二维,还是多维的解决方法
2013/05/04 PHP
五款PHP代码重构工具推荐
2014/10/14 PHP
PHPUnit安装及使用示例
2014/10/29 PHP
10个超级有用值得收藏的PHP代码片段
2015/01/22 PHP
php实现商城购物车的思路和源码分析
2020/07/23 PHP
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
Javascript中的方法链(Method Chaining)介绍
2015/03/15 Javascript
js带点自动图片轮播幻灯片特效代码分享
2015/09/07 Javascript
Vue之Watcher源码解析(1)
2017/07/19 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
JS实现根据指定值删除数组中的元素操作示例
2018/08/02 Javascript
js canvas画布实现高斯模糊效果
2018/11/27 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
JS如何实现封装列表右滑动删除收藏按钮
2020/07/23 Javascript
Openlayers显示地理位置坐标的方法
2020/09/28 Javascript
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
使用python实现strcmp函数功能示例
2014/03/25 Python
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
幼儿教师师德师风自我评价
2015/03/05 职场文书
上市公司财务总监岗位职责
2015/04/03 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
2016读书月活动心得体会
2016/01/14 职场文书
2016年小学教师政治学习心得体会
2016/01/23 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
详细分析PHP7与PHP5区别
2021/06/26 PHP