「從源碼中學習」完全理解Vue選項Props

最近都在寫Vue相關的文章，感興趣的能夠看回我以前寫的。

做者文章總集

• 「從源碼中學習」完全理解Vue選項Props
• 「Vue實踐」項目升級vue-cli3的正確姿式
• 「從源碼中學習」Vue源碼中的JS騷操做
• 爲什麼你始終理解不了JavaScript做用域鏈？

正文：吃下這條魚🐟 - props初始化

initProps 是如何運行的：

1.normalizeProps: initProps 以前的規範化數據

normalizeProps的代碼有點長，這裏只列舉通過規範化後的prop類型和結果

1.1 字符串

props: ["data"]
// 規範化後
props: {
  data:{
    type: null
  }
}
複製代碼

1.2 對象

props: {
  data1: {
    type: String,
    default: ''
  }
  data2: Number,
}
// 規範化後
props: {
  data1: {
    type: String,
    default: ''
  },
  data2: {
    type: Number
  },
}
複製代碼

2.initProps: 處理props

源碼分析以下：

function initProps (vm: Component, propsOptions: Object) {
  const propsData = vm.$options.propsData || {}
  const props = vm._props = {}
  const keys = vm.$options._propKeys = []
  const isRoot = !vm.$parent
  if (!isRoot) {
    toggleObserving(false)
  }
  for (const key in propsOptions) {
    keys.push(key)
    const value = validateProp(key, propsOptions, propsData, vm)
    if (process.env.NODE_ENV !== 'production') {
      const hyphenatedKey = hyphenate(key)
      if (isReservedAttribute(hyphenatedKey) ||
          config.isReservedAttr(hyphenatedKey)) {
        warn(
          `"${hyphenatedKey}" is a reserved attribute and cannot be used as component prop.`,
          vm
        )
      }
      defineReactive(props, key, value, () => {
        if (!isRoot && !isUpdatingChildComponent) {
          warn(
            `Avoid mutating a prop direct....`,
            vm
          )
        }
      })
    } else {
      defineReactive(props, key, value)
    }
    if (!(key in vm)) {
      proxy(vm, `_props`, key)
    }
  }
  toggleObserving(true)
}
複製代碼

2.1 常量定義

const propsData = vm.$options.propsData || {}
 const props = vm._props = {}
 const keys = vm.$options._propKeys = []
 const isRoot = !vm.$parent
複製代碼

• propsData: 存儲着傳遞進來的 props 的值
• props: 引用vm._props`，並初始化爲{}
• keys: 在 vm.$options 上添加 _propKeys 屬性
• isRoot: 判斷是否存在vm.$parent,若無則爲根節點

2.2 條件判斷及循環

if (!isRoot) {
  toggleObserving(false)
}
for (const key in propsOptions) {
  // 省略...
}
toggleObserving(true)
複製代碼

• !isRoot：若當前實例非根節點，關閉toggleObserving
• toggleObserving: 能夠理解爲數據觀測的開關
• for...in : 遍歷propsOptions

2.2.1: 遍歷propsOptions作什麼

for (const key in propsOptions) {
  keys.push(key)
  const value = validateProp(key, propsOptions, propsData, vm)
  if (process.env.NODE_ENV !== 'production') {
      const hyphenatedKey = hyphenate(key)
      if (isReservedAttribute(hyphenatedKey) ||
          config.isReservedAttr(hyphenatedKey)) {
        warn(
          `"${hyphenatedKey}" is a reserved attribute and cannot be used as component prop.`,
          vm
        )
      }
      defineReactive(props, key, value, () => {
        if (!isRoot && !isUpdatingChildComponent) {
          warn(
            `Avoid mutating a prop directly since the value will be ` +
            `overwri  tten whenever the parent component re-renders. ` +
            `Instead, use a data or computed property based on the prop's ` + `value. Prop being mutated: "${key}"`, vm ) } }) } else { defineReactive(props, key, value) } } 複製代碼

劃重點：

• propsOptions 即opts.props
• key 就是每一個 prop 的名字

此時進入循環：

keys.push(key)
const value = validateProp(key, propsOptions, propsData, vm)
複製代碼

• 將 key 添加到 vm.$options._propKeys
• value: 用validateProp校驗是否爲預期的類型值，而後返回相應 prop 值(或default值)

2.2.2: 接着進入 if...else:

這裏註釋一下：

if (process.env.NODE_ENV !== 'production') {
      // 駝峯轉連字符
      const hyphenatedKey = hyphenate(key)
      // 校驗prop是否爲內置的屬性
      // 內置屬性：key,ref,slot,slot-scope,is
      if (isReservedAttribute(hyphenatedKey) ||
          config.isReservedAttr(hyphenatedKey)) {
        warn(
          `"${hyphenatedKey}" is a reserved attribute and cannot be used as component prop.`,
          vm
        )
      }
      defineReactive(props, key, value, () => {
        // 子組件直接修改屬性時 彈出警告
        if (!isRoot && !isUpdatingChildComponent) {
          warn(
            `Avoid mutating a prop directly since the value will be ` +
            `overwri  tten whenever the parent component re-renders. ` +
            `Instead, use a data or computed property based on the prop's ` + `value. Prop being mutated: "${key}"`, vm ) } }) } else { defineReactive(props, key, value) } 複製代碼

最後簡化：

if (process.env.NODE_ENV !== 'production') {
      // 駝峯轉連字符
      // 校驗prop是否爲內置的屬性
      // 內置屬性：key,ref,slot,slot-scope,is
      // 如果內置，彈出警告
      defineReactive(props, key, value, () => {
      // 子組件直接修改屬性時 彈出警告
    } else {
      defineReactive(props, key, value)
    }
複製代碼

工具函數： 「從源碼中學習」Vue源碼中的JS騷操做

2.2.3: defineReactive: 最終處理

defineReactive(props, key, value)
複製代碼

defineReactive是老熟人了，但這裏要注意一點： 先前toggleObserving(false),關閉了觀測的開關，因此defineReactive中調用 observe, 是一個無效調用。

此時到這裏，能夠得出一個結論

props 是經過 defineReactive定義的，此時雖然是響應式數據，但沒有進行深度定義。

即，父組件傳給子組件props後，子組件沒必要再重複觀測props

2.2.4 toggleObserving(true)`: 最後打開觀測開關

toggleObserving(true)
複製代碼

從新打開觀測開關，避免影響後續代碼執行。

感悟：相比分析源碼，理解後寫成博客更難。用文字講清楚一件事可比敲代碼難多了。

求一份深圳的內推

目前本人在準備跳槽，但願各位大佬和HR小姐姐能夠內推一份靠譜的深圳前端崗位!

• 微信：huab119
• 郵箱：454274033@qq.com