【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过程执行patchVnodepatchVnode 通常是一个递归过程,当它遇到组件 vnode 的时候,会执行组件更新过程的 prepatch 钩子函数
        • 即执行到updateChildComponent更新,即props[key] = validateProp(key, propOptions, propsData, vm)
    • 只要是视图模板访问过props的属性以及下级的那些字段,都是响应式的,这个按照一般情况的理解就行了
文章目录