VUEprops实现原理（源码分析）前言我们在使用组件的时候，会传递一些属性给组件，但是在使用的时候，我们只关注它的传递函数数据。没有想过它是怎样的原理，又是如何实现的。其实我们平时写的组件本质上都是一个template模板，这个template模板会被Vue中的render函数解析，最终生成一个VNode。那我们就来看看通过源码生成VNode后，组件属性是如何传递的。源码解析和生成虚拟节点源码生成虚拟节点，我们可以看到这么一段代码，而在这段代码中，propsData是所有属性的定义，这个对象放在虚拟节点上，那么我们就可以查看组件初始化时propsData对象是如何进行操作的。constvnode=newVNode(`vue-component-${Ctor.cid}${name?`-${name}`:''}`,data,undefined,undefined,undefined,context,{Ctor,propsData,listeners,tag,children},asyncFactory)组件初始化源码在下面的代码中，我们可以看到propsData对象被赋值给了当前实例上$options的propsData属性，那么我们可以看看propsData对象在初始化props的时候有什么用它经历的一个过程。constopts=vm.$options=Object.create(vm.constructor.options),constparentVnode=options._parentVnodeopts._parentVnode=parentVnodeconstvnodeComponentOptions=parentVnode.componentOptionsopts.propsData=vnodeComponentOptions.propsData初始化道具来源在这里，来自After$options获取$options对象，它声明了一个名为_props的空对象。constpropsData=vm.$options.propsData||{}constprops=vm._props={}我们用vm.$parent来判断是否是根元素。如果是根元素，则需要将该属性设置为responsive。如果否，您不需要它。constisRoot=!vm.$parentif(!isRoot){//如果根元素属性需要定义为响应式toggleObserving(false)}循环自定义propsOptions选项，会根据user-definedobject输入值通过validateProp方法校验，得到最终结果值。然后通过defineReactive把当前的key和value值定义到我们之前的_props中。最后给我们的实例定义_props对象，这样我们就可以直接通过实例获取属性了。for(constkeyinpropsOptions){keys.push(key)//验证用户定义的属性和传入的属性constvalue=validateProp(key,propsOptions,propsData,vm)if(process.env.NODE_ENV!=='production'){}else{defineReactive(props,key,value)}if(!(keyinvm)){proxy(vm,`_props`,key)}}一般情况下，父组件传递给它的属性定义在它自己的实例。
