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 instance
10   // so that we get proper render context inside it.
11   // args order: tag, data, children, normalizationType, alwaysNormalize
12   // internal version is used by render functions compiled from templates
13   vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
14   // normalization is always applied for the public version, used in
15   // user-written render functions.
16   vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)
17 
18   // $attrs & $listeners are exposed for easier HOC creation.
19   // they need to be reactive so that HOCs using them are always updated
20   const parentData = parentVnode && parentVnode.data
21 
22   /* istanbul ignore else */
23   if (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 constructor
  if (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 & events
  if (isDef(data.model)) {
    transformModel(Ctor.options, data)
  }

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

  // functional component
  if (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   }
 5   for (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) {
 6     return nextTick(fn, this)
 7   }
 8 
 9   Vue.prototype._render = function (): VNode {
10     const vm: Component = this
11     const { render, _parentVnode } = vm.$options
12 
13     // reset _rendered flag on slots for duplicate slot check
14     if (process.env.NODE_ENV !== ‘production‘) {
15       for (const key in vm.$slots) {
16         // $flow-disable-line
17         vm.$slots[key]._rendered = false
18       }
19     }
20 
21     if (_parentVnode) {
22       vm.$scopedSlots = _parentVnode.data.scopedSlots || emptyObject
23     }
24 
25     // set parent vnode. this allows render functions to have access
26     // to the data on the placeholder node.
27     vm.$vnode = _parentVnode
28     // render self
29     let vnode
30     try {
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 component
36       /* istanbul ignore else */
37       if (process.env.NODE_ENV !== ‘production‘) {
38         if (vm.$options.renderError) {
39           try {
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 out
53     if (!(vnode instanceof VNode)) {
54       if (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 parent
64     vnode.parent = _parentVnode
65     return vnode
66   }
67 }