3-2-22-Vue.js 源码阅读-VNode的创建过程

Vue 中的虚拟 DOM - VNode 的创建过程

通过前面 Vue 初始化过程的分析知道，Vue 的虚拟 DOM 的生成实在 lifecycle.js 中的 mountComponent 这个方法中定义的 updateComponent 这个方法完成的。

// updateComponent 的定义
// src/core/instance/lifecycle.js/mountComponent()
updateComponent = () => {
  // _render 将模板转换成虚拟DOM
  // _update 将生成的虚拟 DOM 转换成真实 DOM
  vm._update(vm._render(), hydrating)
}

在 updateComponent 这个方法里面首先调用了 vm._render() 这个函数生成 vnode ，然后把 vnode 传给了 vm._update() 这个方法将 vnode 转换成了真实 DOM。

这个方法是在 Wather 的创建的过程中完成调用的。它会作为 new Watcher 的一个参数传递给 Watcher 。

vm._render()

在 vm._render() 里面其实是调用了用户传入的 render() 函数或者是调用 vue 通过模板转换成的 render 函数。 _render() 函数的定义：

Vue.prototype._render = function (): VNode {
  const vm: Component = this
  // 从 options 中解构出用户传入的 render 函数或者是 vue 生成的 render 
  const { render, _parentVnode } = vm.$options

  if (_parentVnode) {
    vm.$scopedSlots = normalizeScopedSlots(
      _parentVnode.data.scopedSlots,
      vm.$slots,
      vm.$scopedSlots
    )
  }

  // set parent vnode. this allows render functions to have access
  // to the data on the placeholder node.
  vm.$vnode = _parentVnode
  // render self
  let vnode
  try {
    // There's no need to maintain a stack because all render fns are called
    // separately from one another. Nested component's render fns are called
    // when parent component is patched.
    currentRenderingInstance = vm
    // 通过 call 调用 render 函数，改变 this 指向当前实例，将 h 函数作为参数传递给 render 函数
    // vm._renderProxy 就是 Vue 实例, vm.$createElement 就是 h 函数
    vnode = render.call(vm._renderProxy, vm.$createElement)
  } catch (e) {
    handleError(e, vm, `render`)
    // return error render result,
    // or previous vnode to prevent render error causing blank component
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production' && vm.$options.renderError) {
      try {
        vnode = vm.$options.renderError.call(vm._renderProxy, vm.$createElement, e)
      } catch (e) {
        handleError(e, vm, `renderError`)
        vnode = vm._vnode
      }
    } else {
      vnode = vm._vnode
    }
  } finally {
    currentRenderingInstance = null
  }
  // if the returned array contains only a single node, allow it
  if (Array.isArray(vnode) && vnode.length === 1) {
    vnode = vnode[0]
  }
  // return empty vnode in case the render function errored out
  if (!(vnode instanceof VNode)) {
    if (process.env.NODE_ENV !== 'production' && Array.isArray(vnode)) {
      warn(
        'Multiple root nodes returned from render function. Render function ' +
        'should return a single root node.',
        vm
      )
    }
    vnode = createEmptyVNode()
  }
  // set parent
  vnode.parent = _parentVnode
  return vnode
}

从上述代码可以看到，在 _render 函数中是调用了用户传入的 render 函数或者是 Vue 编译生成的 render 函数来生成 vnode 的。

vm.$createElement

从前面的示例中可以看到，当我们给 Vue 实例传入一个 render 函数的时候，会接受一个 h 函数作为参数，这个 h 函数也就是上述代码中传入的 vm.$createElement函数。在render中我们也正式通过调用这个vm.$createElement 函数生成的 vnode 。下面来看 vm.$createElement 函数的定义。

// bind the createElement fn to this instance
// so that we get proper render context inside it.
// args order: tag, data, children, normalizationType, alwaysNormalize
// internal version is used by render functions compiled from templates
// 对编译生成的 render 进行渲染的方法
vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
// normalization is always applied for the public version, used in
// user-written render functions.
// 对手写 render 函数进行渲染的方法
vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)

由此可以看出 vm.$createElement 函数是由 createElement 函数生成的一个函数。createElement 函数如下：

// wrapper function for providing a more flexible interface
// without getting yelled at by flow
export function createElement (
  context: Component,
  tag: any,
  data: any,
  children: any,
  normalizationType: any,
  alwaysNormalize: boolean
): VNode | Array<VNode> {
  // 在 createElement 这个函数中主要是对参数做处理
  // vnode 由 _createElement 来完成
  if (Array.isArray(data) || isPrimitive(data)) {
    normalizationType = children
    children = data
    data = undefined
  }
  if (isTrue(alwaysNormalize)) {
    normalizationType = ALWAYS_NORMALIZE
  }
  // 返回 _createElement 生成的 vnode
  return _createElement(context, tag, data, children, normalizationType)
}

通过上述代码的分析，其实在 createElement 这个函数中主要做的事情就是对参数做处理，这样做的目的就是为了提高方法的灵活性（可以传两个参数也可以传三个参数）。它最终会返回一个 vnode 这个 vnode 是由 _createElement 这个函数生成的。

_createElement

通过上面的一连串的调用，我们知道，vnode 最终是由 _createElement 这个方法生成的，下面来分析 _createElement 这个函数生成 vnode 的具体过程。

export function _createElement (
  context: Component,
  tag?: string | Class<Component> | Function | Object,
  data?: VNodeData,
  children?: any,
  normalizationType?: number
): VNode | Array<VNode> {
  if (isDef(data) && isDef((data: any).__ob__)) {
    // 如果 data 不为空且是响应式数据
    process.env.NODE_ENV !== 'production' && warn(
      `Avoid using observed data object as vnode data: ${JSON.stringify(data)}\n` +
      'Always create fresh vnode data objects in each render!',
      context
    )
    // 返回空 vnode 的方法
    return createEmptyVNode()
  }
  // <component v-bind:is="currentTabComponent"></component>>
  // object syntax in v-bind
  if (isDef(data) && isDef(data.is)) {
    tag = data.is
  }
  if (!tag) {
    // in case of component :is set to falsy value
    return createEmptyVNode()
  }
  // warn against non-primitive key
  if (process.env.NODE_ENV !== 'production' &&
    isDef(data) && isDef(data.key) && !isPrimitive(data.key)
  ) {
    if (!__WEEX__ || !('@binding' in data.key)) {
      warn(
        'Avoid using non-primitive value as key, ' +
        'use string/number value instead.',
        context
      )
    }
  }
  // support single function children as default scoped slot
  if (Array.isArray(children) &&
    typeof children[0] === 'function'
  ) {
    data = data || {}
    data.scopedSlots = { default: children[0] }
    children.length = 0
  }
  // 这里做的事情就是将 children 拍平，使其变成一个一维数组，方便后续处理
  if (normalizationType === ALWAYS_NORMALIZE) {
    // 返回一维数组，处理用户手写的 render
    children = normalizeChildren(children)
  } else if (normalizationType === SIMPLE_NORMALIZE) {
    // 返回一维数组，转换成一维数组
    children = simpleNormalizeChildren(children)
  }
  // 创建 vnode
  let vnode, ns
  if (typeof tag === 'string') {
    let Ctor
    ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
    // 是否是 html 的保留标签
    if (config.isReservedTag(tag)) {
      // platform built-in elements
      if (process.env.NODE_ENV !== 'production' && isDef(data) && isDef(data.nativeOn)) {
        warn(
          `The .native modifier for v-on is only valid on components but it was used on <${tag}>.`,
          context
        )
      }
      vnode = new VNode(
        config.parsePlatformTagName(tag), data, children,
        undefined, undefined, context
      )
    // 判断是否是自定义组件
    } else if ((!data || !data.pre) &&isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
      // 查找自定义组件构造函数的声明
      // 根据 Ctor 创建组件的 VNode
      // component
      vnode = createComponent(Ctor, data, context, children, tag)
    } else {
      // unknown or unlisted namespaced elements
      // check at runtime because it may get assigned a namespace when its
      // parent normalizes children
      vnode = new VNode(
        tag, data, children,
        undefined, undefined, context
      )
    }
  } else {
    // direct component options / constructor
    vnode = createComponent(tag, data, context, children)
  }
  if (Array.isArray(vnode)) {
    return vnode
  } else if (isDef(vnode)) {
    if (isDef(ns)) applyNS(vnode, ns)
    if (isDef(data)) registerDeepBindings(data)
    return vnode
  } else {
    return createEmptyVNode()
  }
}

在 _createElement 方法中通过对组件或者原始标签的分类讨论生成了不同类型对应的 vnode 。