因此分析props需要分析父组件和子组件的两个过程,我们先看父组件对传递值的处理。按照以往文章介绍的那样,父组件优先进行模板编译得到一个render函数,在解析过程中遇到子组件的属性,:test=test会被解析成{ attrs: {test: test}}并作为子组件的render函数存在,如下所示:

    先看检测props规范性的过程。props编译后的结果有两种,其中attrs前面分析过,是编译生成render函数针对属性的处理,而props是针对用户自写render函数的属性值。因此需要同时对这两种方式进行校验。

    7.2.2 响应式数据props

    刚才说到分析props需要两个过程,前面已经针对父组件对props的处理做了描述,而对于子组件而言,我们是通过选项去接收父组件传递的值。我们再看看子组件对props的处理:

    其中proxy(vm, "_props", key);props做了一层代理,用户通过vm.XXX可以代理访问到vm._props上的值。针对defineReactive,本质上是利用对数据的getter,setter方法进行重写,具体的原理可以参考数据代理章节的内容,在这小节后半段也会有一个基本的实现。