Vue源码翻译之渲染逻辑链

                 1 export function initRender (vm: Component) {
 2   vm._vnode = null// the root of the child tree 3   vm._staticTrees = null// v-once cached trees 4   const options = vm.$options
 5   const parentVnode = vm.$vnode = options._parentVnode // the placeholder node in parent tree 6   const renderContext = parentVnode && parentVnode.context
 7   vm.$slots = resolveSlots(options._renderChildren, renderContext)
 8   vm.$scopedSlots = emptyObject
 9// bind the createElement fn to this instance10// so that we get proper render context inside it.11// args order: tag, data, children, normalizationType, alwaysNormalize12// internal version is used by render functions compiled from templates13   vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
14// normalization is always applied for the public version, used in15// user-written render functions.16   vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)
1718// $attrs & $listeners are exposed for easier HOC creation.19// they need to be reactive so that HOCs using them are always updated20   const parentData = parentVnode && parentVnode.data
2122/* istanbul ignore else */23if (process.env.NODE_ENV !== ‘production‘) {
24     defineReactive(vm, ‘$attrs‘, parentData && parentData.attrs || emptyObject, () => {
25       !isUpdatingChildComponent && warn(`$attrs is readonly.`, vm)
26     }, true)
27     defineReactive(vm, ‘$listeners‘, options._parentListeners || emptyObject, () => {
28       !isUpdatingChildComponent && warn(`$listeners is readonly.`, vm)
29     }, true)
30   } else {
31     defineReactive(vm, ‘$attrs‘, parentData && parentData.attrs || emptyObject, null, true)
32     defineReactive(vm, ‘$listeners‘, options._parentListeners || emptyObject, null, true)
33  }
34 }

export function createComponent (
  Ctor: Class<Component> | Function | Object | void,
  data: ?VNodeData,
  context: Component,
  children: ?Array<VNode>,
  tag?: string): VNode | Array<VNode> | void {
  if (isUndef(Ctor)) {
    return
  }

  const baseCtor = context.$options._base

  // plain options object: turn it into a constructorif (isObject(Ctor)) {
    // Vue.extend(Component)
    Ctor = baseCtor.extend(Ctor)
  }

  // if at this stage it‘s not a constructor or an async component factory,// reject.if (typeof Ctor !== ‘function‘) {
    if (process.env.NODE_ENV !== ‘production‘) {
      warn(`Invalid Component definition: ${String(Ctor)}`, context)
    }
    return
  }

  // async component  let asyncFactory
  if (isUndef(Ctor.cid)) {
    asyncFactory = Ctor
    Ctor = resolveAsyncComponent(asyncFactory, baseCtor, context)
    if (Ctor === undefined) {
      // return a placeholder node for async component, which is rendered// as a comment node but preserves all the raw information for the node.// the information will be used for async server-rendering and hydration.return createAsyncPlaceholder(
        asyncFactory,
        data,
        context,
        children,
        tag
      )
    }
  }

  data = data || {}

  // resolve constructor options in case global mixins are applied after// component constructor creation  resolveConstructorOptions(Ctor)

  // transform component v-model data into props & eventsif (isDef(data.model)) {
    transformModel(Ctor.options, data)
  }

  // extract props
  const propsData = extractPropsFromVNodeData(data, Ctor, tag)

  // functional componentif (isTrue(Ctor.options.functional)) {
    return createFunctionalComponent(Ctor, propsData, data, context, children)
  }

  // extract listeners, since these needs to be treated as// child component listeners instead of DOM listeners
  const listeners = data.on
  // replace with listeners with .native modifier// so it gets processed during parent component patch.
  data.on = data.nativeOn

  if (isTrue(Ctor.options.abstract)) {
    // abstract components do not keep anything// other than props & listeners & slot// work around flow
    const slot = data.slot
    data = {}
    if (slot) {
      data.slot = slot
    }
  }

  // merge component management hooks onto the placeholder node  mergeHooks(data)

  // return a placeholder vnode
  const name = Ctor.options.name || tag
  const vnode = new VNode(
    `vue-component-${Ctor.cid}${name ? `-${name}` : ‘‘}`,
    data, undefined, undefined, undefined, context,
    { Ctor, propsData, listeners, tag, children },
    asyncFactory
  )

  // Weex specific: invoke recycle-list optimized @render function for// extracting cell-slot template.// https://github.com/Hanks10100/weex-native-directive/tree/master/component/* istanbul ignore if */if (__WEEX__ && isRecyclableComponent(vnode)) {
    return renderRecyclableComponentTemplate(vnode)
  }

  return vnode
}

                 1
                function
                 mergeHooks (data: VNodeData) {

                 2
                if (!data.hook) {
 3     data.hook = {}
 4  }
 5for (let i = 0; i < hooksToMerge.length; i++) {
 6     const key = hooksToMerge[i]
 7     const fromParent = data.hook[key]
 8     const ours = componentVNodeHooks[key]
 9     data.hook[key] = fromParent ? mergeHook(ours, fromParent) : ours
10  }
11 }

                 1 export function renderMixin (Vue: Class<Component>) {
 2// install runtime convenience helpers 3  installRenderHelpers(Vue.prototype)
 4 5   Vue.prototype.$nextTick = function (fn: Function) {
 6return nextTick(fn, this)
 7  }
 8 9   Vue.prototype._render = function (): VNode {
10     const vm: Component = this11     const { render, _parentVnode } = vm.$options
1213// reset _rendered flag on slots for duplicate slot check14if (process.env.NODE_ENV !== ‘production‘) {
15for (const key in vm.$slots) {
16// $flow-disable-line17         vm.$slots[key]._rendered = false18      }
19    }
2021if (_parentVnode) {
22       vm.$scopedSlots = _parentVnode.data.scopedSlots || emptyObject
23    }
2425// set parent vnode. this allows render functions to have access26// to the data on the placeholder node.27     vm.$vnode = _parentVnode
28// render self29    let vnode
30try {
31       vnode = render.call(vm._renderProxy, vm.$createElement)
32     } catch (e) {
33      handleError(e, vm, `render`)
34// return error render result,35// or previous vnode to prevent render error causing blank component36/* istanbul ignore else */37if (process.env.NODE_ENV !== ‘production‘) {
38if (vm.$options.renderError) {
39try {
40             vnode = vm.$options.renderError.call(vm._renderProxy, vm.$createElement, e)
41           } catch (e) {
42            handleError(e, vm, `renderError`)
43             vnode = vm._vnode
44          }
45         } else {
46           vnode = vm._vnode
47        }
48       } else {
49         vnode = vm._vnode
50      }
51    }
52// return empty vnode in case the render function errored out53if (!(vnode instanceof VNode)) {
54if (process.env.NODE_ENV !== ‘production‘ && Array.isArray(vnode)) {
55        warn(
56           ‘Multiple root nodes returned from render function. Render function ‘ +
57           ‘should return a single root node.‘,
58          vm
59        )
60      }
61       vnode = createEmptyVNode()
62    }
63// set parent64     vnode.parent = _parentVnode
65return vnode
66  }
67 }