因此分析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
方法进行重写,具体的原理可以参考数据代理章节的内容,在这小节后半段也会有一个基本的实现。