详解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 相关文章推荐
基于JQuery的密码强度验证代码
Mar 01 Javascript
javascript学习笔记(八) js内置对象
Jun 19 Javascript
jQuery实现表头固定效果的实例代码
May 24 Javascript
javascript与cookie 的问题详解
Nov 11 Javascript
node.js中的fs.realpath方法使用说明
Dec 16 Javascript
JavaScript设计模式之工厂模式和构造器模式
Feb 11 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
javascript中this的四种用法
May 11 Javascript
jQuery插件ajaxFileUpload使用实例解析
Oct 19 Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
老生常谈js数据类型
Aug 03 Javascript
使用SVG基本操作API的实例讲解
Sep 14 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
php 之 没有mysql支持时的替代方案
2006/10/09 PHP
浅析PHP原理之变量(Variables inside PHP)
2013/08/09 PHP
php过滤表单提交的html等危险代码
2014/11/03 PHP
大家须知简单的php性能优化注意点
2016/01/04 PHP
限制复选框的最大可选数
2006/07/01 Javascript
javascript 原型模式实现OOP的再研究
2009/04/09 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
调用DOM对象的focus使文本框获得焦点
2014/02/19 Javascript
学习JavaScript设计模式(策略模式)
2015/11/26 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
2016/10/24 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
2019/08/01 Javascript
vue quill editor 使用富文本添加上传音频功能
2020/01/14 Javascript
vue实现购物车功能(商品分类)
2020/04/20 Javascript
vue动态设置页面title的方法实例
2020/08/23 Javascript
python实现多线程的两种方式
2016/05/22 Python
python 常用的基础函数
2018/07/10 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
利用nohup来开启python文件的方法
2019/01/14 Python
简单了解python代码优化小技巧
2019/07/08 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
css3中transition属性详解
2014/09/02 HTML / CSS
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
《阳光》教学反思
2014/02/23 职场文书
户外活动策划方案
2014/03/12 职场文书
公司授权委托书
2014/04/04 职场文书
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
食品销售计划书
2014/04/26 职场文书
治安消防安全责任书
2014/07/23 职场文书
售房委托书
2014/08/30 职场文书
工人先锋号申报材料
2014/12/29 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书
谢师宴学生答谢词
2015/09/30 职场文书
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js