iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 5
0
Modern Web

技術在走,Vue.js 要有系列 第 5

|D5| 從原始碼看 Vue 渲染機制 (3) - createElement

createElement 方法主要關注第六個參數,

  • alwaysNormalize
    • 影響 _createElement 方法裡,children 的規範化
    • alwaysNormalize 是 true 時,normalizationType = 2
    • alwaysNormalize 是 fasle 時,normalizationType = 1
// 在 `src/core/vdom/create-elemenet.js` 中

const SIMPLE_NORMALIZE = 1
const ALWAYS_NORMALIZE = 2

export function createElement (
  context: Component,
  tag: any,
  data: any,
  children: any,
  normalizationType: any,
  alwaysNormalize: boolean
): VNode | Array<VNode> {
  if (Array.isArray(data) || isPrimitive(data)) {
    normalizationType = children
    children = data
    data = undefined
  }
  
  /***********************************
   判斷 normalizationType 是 1 還是 2
  ***********************************/
  if (isTrue(alwaysNormalize)) {
    normalizationType = ALWAYS_NORMALIZE
  }
  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> {
  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
  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
  }
  
  /********************************************************
   根據不同 normalizationType 規範 children 為 `VNode` array
  *********************************************************/
  if (normalizationType === ALWAYS_NORMALIZE) {
    children = normalizeChildren(children)
  } else if (normalizationType === SIMPLE_NORMALIZE) {
    children = simpleNormalizeChildren(children)
  }
  let vnode, ns
  if (typeof tag === 'string') {
    let Ctor
    ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
    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))) {
      // 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 的,有 5 個參數

  • context

    • 編譯作用域,表示 vm 實例
  • tag

    • 表示當前 VNode 的標籤名
    • 可以是字串或一個 Component
  • data

    • 表示 VNode 的數據
    • VNodeData 定義在 types/vnode.d.ts
  • children

    • 包含當前 VNode 的子節點
    • 是任意類型,根據不同 type 被規範為 VNode array
  • normalizationType

    • 有兩種 type,是 children 規範化的依據
    • normalizationType = 1,調用 simpleNormalizeChildren 方法規範 children
      • simpleNormalizeChildren 方法在 render function 是編譯生成時調用,需要處理 functional component return 的是 array 不是一個根節點,所以用 Array.prototype.concat 方法把 children array 變成一維
      //在 `src/core/vdom/helpers/normalzie-children.js` 中
      
      export function simpleNormalizeChildren (children: any) {
        for (let i = 0; i < children.length; i++) {
          if (Array.isArray(children[i])) {
            return Array.prototype.concat.apply([], children)
          }
        }
        return children
      }
      
      • normalizeChildren 方法在兩種情況調用,一是 render function 是自己寫的屬性時,children 只有一個節點,調用 createTextVNode。兩是編譯slot v-forchildren 是多維 array,調用 normalizeArrayChildren
      //在 `src/core/vdom/helpers/normalzie-children.js` 中
      
      export function normalizeChildren (children: any): ?Array<VNode> {
        return isPrimitive(children)
          ? [createTextVNode(children)]
          : Array.isArray(children)
            ? normalizeArrayChildren(children)
            : undefined
      }
      

上一篇
|D4| 從原始碼看 Vue 渲染機制 (2) - Virtual DOM
下一篇
|D6| 從原始碼看 Vue 渲染機制 (4) - render
系列文
技術在走,Vue.js 要有30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言