【4-5】响应式原理 之 props 是响应式的证明

《props 是响应式的证明》：

这一篇主要从源码的执行层面，解释为何 props 是响应式的。

本质仍是defineReactive(props, key, value)，配合上在访问props时候如果有Dep.target的指向，那么就满足响应式的条件。

• 为什么说props是响应式的：
  • 从props相关源码里我们发现有两处地方作了响应式相关的处理。
    • 第一处是在调用validateProp来校验并获取prop的值时，针对默认值提供的数据进行的响应式处理。
    • 第二处是在获取到prop的值后，将prop属性定义为响应式属性。
    • 学习了响应式原理的Observer之后我们知道，经过observe处理后的响应式对象，仅在其子孙属性改变之后才能通知订阅者。而经过defineReactive(props, key, value)处理后，prop值自身改变时，也能通知订阅者。这二者一结合，就能保证，无论是prop自身改变，还是其子孙元素改变，都能通知到订阅者。

具体的相关代码和运作机制如下：

• (props之所以支持那么多的书写格式，是因为初始化的时候会执行normalizeProps，即在经历规范化之后，格式结果都是统一一致的，方便后面的流程处理)
• 基于响应式这个话题，在initState 中重点看 Props 和 data的部分。
  • ( data 和 props 都会弄成响应式的)
  • initProps 主要做 3 件事情：校验、响应式和数据代理(this.xxx访问)。
    • defineReactive
  • initData 略
• ----------数据变化阶段(尤其是父组件传入的props变化)： ----------
  • 反正父组件保证把变化更新到子组件的vm._props
    • 记录性质【详细过程可不看】
      • 父组件patch过程执行patchVnode。patchVnode 通常是一个递归过程，当它遇到组件 vnode 的时候，会执行组件更新过程的 prepatch 钩子函数
      • 即执行到updateChildComponent更新，即props[key] = validateProp(key, propOptions, propsData, vm)
  • 只要是视图模板访问过props的属性以及下级的那些字段，都是响应式的，这个按照一般情况的理解就行了