「从源码中学习」彻底理解Vue选项Props-CSDN博客

最近都在写Vue相关的文章，感兴趣的可以看回我之前写的。

作者文章总集

正文：吃下这条鱼? - `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

「从源码中学习」彻底理解Vue选项Props

作者文章总集

正文：吃下这条鱼? - props初始化

1.normalizeProps: initProps 之前的规范化数据