【阅读Vue源码】createElement

待我称王封你为后i 2023-06-27 12:50 14阅读 0赞

源码来自于 [https://github.com/vuejs/vue][https_github.com_vuejs_vue]

## createElement ##

src/core/vdom/create-elemenet.js

const SIMPLE_NORMALIZE = 1
    const ALWAYS_NORMALIZE = 2
     
    // 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> {
      /* 兼容不传data的情况
       * 通过判断data是不是数组，以及是不是基本类型，来决定data是否传入
       * 如果没有传入，则将所有的参数向前赋值，且data = undefined
       */
      if (Array.isArray(data) || isPrimitive(data)) {
        normalizationType = children
        children = data
        data = undefined
      }
      /* 根据alwaysNormalize传不同的normalizationType
       * normalizationType关系到后面children的扁平处理
       * 没有children则不需要对normalizationType赋值，children和normalizationType就都是空值
       */
      if (isTrue(alwaysNormalize)) {
        normalizationType = ALWAYS_NORMALIZE
      }
      /* context  ———— vm实例
       * tag      ———— vnode的tag标签，可以为字符串、组件以及函数
       * data     ———— vnode的data相关数据
       * children ———— 它的一些子节点，包含一系列的vnode，形成vnode tree，完美映射到dom tree
       */
      return _createElement(context, tag, data, children, normalizationType)
    }
     
    export function _createElement (
      context: Component,
      tag?: string | Class<Component> | Function | Object,
      data?: VNodeData,
      children?: any,
      normalizationType?: number
    ): VNode | Array<VNode> {
      /* 如果data 且 data的__ob__已经定义，
       * 说明data是被Observer观察的数据，不能用作虚拟节点的data
       * 需要抛出警告，并返回一个空节点，
       * 被监控的data不能被用作vnode渲染的数据的原因是：
       * data在vnode渲染过程中可能会被改变，这样会触发监控，导致不符合预期的操作
       */
      if (isDef(data) && isDef((data: any).__ob__)) {
        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
        )
        return createEmptyVNode()
      }
      // object syntax in v-bind
      // tagName 绑定在data参数里面
      if (isDef(data) && isDef(data.is)) {
        tag = data.is
      }
      // tagName不存在时，返回一个空节点
      if (!tag) {
        // in case of component :is set to falsy value
        return createEmptyVNode()
      }
      // data.key 如果不是基础类型，则警告⚠️
      // 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
          )
        }
      }
      // 当children中有function类型时，作slot 处理
      // 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
      }
      /* simpleNormalizeChildren 的适用场景：render函数调用编译生成的。
       * 按理来说render函数返回的已经是vnode类型，但是函数式组件返回的是一个数组而不是一个节点，
       * 所以通过array.prototype.concat将多维数组转化为一维数组。
       * normalizeChildren 的适用场景有两个：
       * 1）render函数是用户手写的。当children只有一个节点的时候，调用createTextVNode。
       * 2）当编译slot、v-for的时候会产生嵌套数组的情况，会调用normalizeArrayChildren。
       * normalizeArrayChildren接收2个参数：children表示要规范的子节点，nestedIndex表示嵌套的索引。
       */
      if (normalizationType === ALWAYS_NORMALIZE) {         // 手写render函数
        children = normalizeChildren(children)
      } else if (normalizationType === SIMPLE_NORMALIZE) {  // 编译render函数
        children = simpleNormalizeChildren(children)
      }
      // 经过上面规范化children后，接下来去创建一个VNode实例
      let vnode, ns
      /* 判断 tag 是否字符串
       * @是：可以确定该 VNode 是标签元素
       * @否：说明其为 组件选项对象，直接走createComponent逻辑
       * 为什么只有这两个选项？先看最开始定义貌似有4个：
       * tag?: string | Class<Component> | Function | Object
       * 但其实，当 tag 为Function时，其返回值类型 为string/Object
       */
      if (typeof tag === 'string') {
        let Ctor
        // namespace 处理
        ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
        /* 如果是内置的一些节点，则直接创建一个普通的VNode
         * 如果是已注册的组件名，则通过createComponent创建一个组件类型的VNode
         * 否则创建一个未知标签的VNode
         */
        if (config.isReservedTag(tag)) {
          // platform built-in elements
          vnode = new VNode(
            config.parsePlatformTagName(tag), data, children,
            undefined, undefined, context
          )
        } else if (isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
          // 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)
      }
      // 判定VNode类型，对应返回
      if (Array.isArray(vnode)) {
        return vnode
      } else if (isDef(vnode)) {
        // namespace 相关处理
        if (isDef(ns)) applyNS(vnode, ns)
        // 进行 Observer 相关绑定
        if (isDef(data)) registerDeepBindings(data)
        return vnode
      } else {
        return createEmptyVNode()
      }
    }

## normalize：children的规范化 ##

src/core/vdom/helpers/normalize-children.js

// The template compiler attempts to minimize the need for normalization by
    // statically analyzing the template at compile time.
    //
    // For plain HTML markup, normalization can be completely skipped because the
    // generated render function is guaranteed to return Array<VNode>. There are
    // two cases where extra normalization is needed:
     
    // 1. When the children contains components - because a functional component
    // may return an Array instead of a single root. In this case, just a simple
    // normalization is needed - if any child is an Array, we flatten the whole
    // thing with Array.prototype.concat. It is guaranteed to be only 1-level deep
    // because functional components already normalize their own children.
    export function simpleNormalizeChildren (children: any) {
      for (let i = 0; i < children.length; i++) {
        /* 如果children中有一个是数组,
         * 则将整个children作为参数组用concat连接,
         * 可以得到每个子元素都是vnode的children,
         * 适用于只有一级嵌套数组的情况。
         */
        if (Array.isArray(children[i])) {
          return Array.prototype.concat.apply([], children)
        }
      }
      return children
    }
     
    // 2. When the children contains constructs that always generated nested Arrays,
    // e.g. <template>, <slot>, v-for, or when the children is provided by user
    // with hand-written render functions / JSX. In such cases a full normalization
    // is needed to cater to all possible types of children values.
    export function normalizeChildren (children: any): ?Array<VNode> {
      /* 判断是否基础类型
       * @是：创建文本节点
       * @否：判断是否数组
       *     @是：作normalizeArrayChildren处理
       *     @否：返回undefined
       * 最终效果: 也是为了返回一组一维vnode的数组
       */
      return isPrimitive(children)
        ? [createTextVNode(children)]
        : Array.isArray(children)
          ? normalizeArrayChildren(children)
          : undefined
    }
     
    function normalizeArrayChildren (children: any, nestedIndex?: string): Array<VNode> {
      const res = []
      let i, c, lastIndex, last
      for (i = 0; i < children.length; i++) {
        // 用 c 存储children的值
        c = children[i]
        if (isUndef(c) || typeof c === 'boolean') continue
        lastIndex = res.length - 1
        last = res[lastIndex]
        //  nested
        /* 三种情况：数组、基础节点、正常的VNode
         * 其共同点：merge adjacent text nodes
         * 即：如果存在两个连续的text节点，则合并成一个text节点
         */
        if (Array.isArray(c)) {
          if (c.length > 0) {
            // 递归调用函数 normalizeArrayChildren
            c = normalizeArrayChildren(c, `${nestedIndex || ''}_${i}`)
            // merge adjacent text nodes
            // 如果下一次处理的第一个节点和最后处理的节点都是文本节点，则合并成一个文本节点
            if (isTextNode(c[0]) && isTextNode(last)) {
              res[lastIndex] = createTextVNode(last.text + (c[0]: any).text)
              c.shift()
            }
            /* 三种写法：
             * res.push.apply(res, c);
             * [].push.apply(res, c);
             * Array.prototype.push.apply(res, c);
             * 优点：不会生成新的数组
             */
            res.push.apply(res, c)
          }
        } else if (isPrimitive(c)) {
          /* 判断最后一个结点是不是文本节点，
           * @是：将其与该元素合并为一个文本节点，放到res[lastIndex]
           * @否：把这个基本类型转换为文本节点(VNode)，push 进 res
           */
          if (isTextNode(last)) {
            // merge adjacent text nodes
            // this is necessary for SSR hydration because text nodes are
            // essentially merged when rendered to HTML strings
            // 这是SSR hydration所必需的，因为文本节点渲染成html时基本上都是合并的
            res[lastIndex] = createTextVNode(last.text + c)
          } else if (c !== '') {
            // convert primitive to vnode
            res.push(createTextVNode(c))
          }
        } else {
          if (isTextNode(c) && isTextNode(last)) {
            // merge adjacent text nodes
            res[lastIndex] = createTextVNode(last.text + c.text)
          } else {
            // default key for nested array children (likely generated by v-for)
            // 如果children是一个列表且列表还存在嵌套的情况，则根据nestedIndex去更新它的key
            if (isTrue(children._isVList) &&
              isDef(c.tag) &&
              isUndef(c.key) &&
              isDef(nestedIndex)) {
              c.key = `__vlist${nestedIndex}_${i}__`
            }
            res.push(c)
          }
        }
      }
      return res
    }

## createEmptyVNode ##

src/core/vdom/vnode.js

export const createEmptyVNode = (text: string = '') => {
      const node = new VNode()
      node.text = text
      node.isComment = true   // 注释vnode
      return node
    }

创建一个空的Vnode，有效属性只有text和isComment。

注释节点

真实的注释节点：
    
     
    VNode描述：
    createEmptyVNode ('注释节点')
    {
      text: '注释节点',
      isComment: true
    }

文本节点

VNode描述：
    createTextVNode('文本节点')
    {
      text: '文本节点'
    }

[https_github.com_vuejs_vue]: https://github.com/vuejs/vue