关于vue.js:VUE-props-实现原理源码解析

VUE props 实现原理（源码解析）

前言

咱们在应用组件的时候，都会给组件传入一些属性，然而在应用时，却只是关注了它传递数据的性能，没有想过它是怎么的一个原理，具体是怎么实现的。

其实咱们平时写进去的组件，实质上就是一个template模板，而这个template模板在vue中，会通过render函数解析，最终生成一个VNode。那咱们通过源码来看一下在生成VNode后，组件属性是怎么实现传递的。

源码解析

生成虚构节点源码

在生成虚构节点这，咱们能够看到这样一段代码，而这段代码中，propsData则是所有属性的一个定义，而这个对象的放在了虚构节点上，那咱们能够看看组件初始化时，这个propsData对象经验了怎么的操作。

 const vnode = new VNode(
    `vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,
    data, undefined, undefined, undefined, context,
    { Ctor, propsData, listeners, tag, children },
    asyncFactory
  )

组件初始化源码

在下段代码中，咱们能够看到propsData对象是被赋值到了以后实例上的$options的propsData属性中，那咱们能够看一下初始化props时，这个propsData对象又通过了怎么的一个过程。

const opts = vm.$options = Object.create(vm.constructor.options)、
  const parentVnode = options._parentVnode
  opts._parentVnode = parentVnode
  const vnodeComponentOptions = parentVnode.componentOptions
  opts.propsData = vnodeComponentOptions.propsData

初始化props源码

在这里，从$options拿到$options对象后，申明了一个叫_props的空对象。

const propsData = vm.$options.propsData || {}
 const props = vm._props = {}

上面通过vm.$parent判断一下是不是根元素，如果是根元素，属性则须要设置为响应式的，如果不是则不须要。

const isRoot = !vm.$parent 
 if (!isRoot) {//如果是根元素  属性须要定义成响应式
    toggleObserving(false)
 }

循环用户定义了的propsOptions选项，它会依据用户定义的对象来和用户传入的值通过validateProp办法来进行一个校验，并且拿到最终的后果value。

而后将以后key和value值，通过defineReactive定义到咱们后面的_props中。

最终，将_props对象定义到咱们的实例下来，这样咱们就能够通过实例，间接拿取到属性了。

 for (const key in propsOptions) {
    keys.push(key)  //校验用户定义的属性和传入的属性
    const value = validateProp(key, propsOptions, propsData, vm)
    if (process.env.NODE_ENV !== 'production') {
      
    } else {
      defineReactive(props, key, value)
    }
    if (!(key in vm)) {
      proxy(vm, `_props`, key)
    }
  }

总的来说，就是将父组件传给它的属性，定义到了它本人的实例上了。