1initState(vm)
2
3function initState(vm) {
4  vm._watchers = []
5  const opts = vm.$options
6  if (opts.props)
7    initProps(vm, opts.props)
8
9  // ...
10}
11
12function initProps(vm, propsOptions) {
13  const propsData = vm.$options.propsData || {} // 获取Vue实例选项上的Props
14  const props = (vm._props = {}) // 获取挂载Vue实例上的_props
15  const keys = (vm.$options._propKeys = []) // Props的Key值组成的数组
16  // ...
17  for (const key in propsOptions) loop(key) // 循环遍历 vue 实例选项中Props，并且执行响应式处理以及挂载在对应实例上
18  // ...
19}

1const sharedPropertyDefinition = {
2  enumerable: true,
3  configurable: true,
4  get: noop,
5  set: noop,
6}
7function proxy(target, sourceKey, key) {
8  sharedPropertyDefinition.get = function proxyGetter() {
9    return this[sourceKey][key]
10  }
11  sharedPropertyDefinition.set = function proxySetter(val) {
12    this[sourceKey][key] = val
13  }
14  Object.defineProperty(target, key, sharedPropertyDefinition)
15}
16
17const loop = function (key) {
18  keys.push(key) // 每遍历一次Props中的值，都会收集其Key
19  // ...
20  defineReactive$$1(props, key, value, () => {
21    // 将Vue实例上对象的_props中每一项属性都设置响应式
22    if (!isRoot && !isUpdatingChildComponent) {
23      // 配置的Setter函数，避免子组件直接操作Props的警告
24      warn(
25        `Avoid mutating a prop directly since the value will be `
26        + `overwritten whenever the parent component re-renders. `
27        + `Instead, use a data or computed property based on the prop's `
28        + `value. Prop being mutated: "${
29          key
30          }"`,
31        vm
32      )
33    }
34  })
35  // static props are already proxied on the component's prototype
36  // during Vue.extend(). We only need to proxy props defined at
37  // instantiation here.
38  if (!(key in vm)) {
39    // 遍历时若发现新属性时，就将新属性重新挂载到Vue实例的_props中
40    proxy(vm, '_props', key)
41  }
42}

1updateChildComponent(
2  child,
3  options.propsData, // updated props
4  options.listeners, // updated listeners
5  vnode, // new parent vnode
6  options.children // new children
7)
8
9function updateChildComponent(vm, propsData, listeners, parentVnode, renderChildren) {
10  // ...
11  // update props
12  if (propsData && vm.$options.props) {
13    toggleObserving(false) // 关闭依赖监听
14    const props = vm._props // 获取Vue实例上_props对象
15    const propKeys = vm.$options._propKeys || [] // 获取保留在Vue实例上的props key值
16    for (let i = 0; i < propKeys.length; i++) {
17      // 循环遍历props key
18      const key = propKeys[i]
19      const propOptions = vm.$options.props // wtf flow?
20      props[key] = validateProp(key, propOptions, propsData, vm) // 先校验Props中定义的数据类型是否符合，符合的话就直接返回，并且直接赋值给Vue实例上_props对象中相应的属性中
21    }
22    toggleObserving(true) // 打开依赖监听
23    // keep a copy of raw propsData
24    vm.$options.propsData = propsData // 新的PropsData直接取替掉选项中旧的PropsData
25  }
26  // ...
27}

1props: {
2  name: {
3    type: String,
4    required: true
5  }
6}