前言

平時寫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 函數將 '-' 轉換為駝峰。這里有個三目運算：