const {h} = Vue;
debugger;
h('div');

function h(type, propsOrChildren, children) {
    // 通過(guò)參數(shù)數(shù)量來(lái)進(jìn)行重載
    const l = arguments.length;
    // 如果參數(shù)數(shù)量為2，那么就有兩種情況
    if (l === 2) {
        // 如果第二個(gè)參數(shù)是對(duì)象，并且不是數(shù)組
        if (isObject(propsOrChildren) && !isArray(propsOrChildren)) {
            // 如果第二個(gè)參數(shù)是虛擬dom，那么就將第二個(gè)參數(shù)作為子節(jié)點(diǎn)進(jìn)行處理
            if (isVNode(propsOrChildren)) {
                return createVNode(type, null, [propsOrChildren]);
            }
            // 如果第二個(gè)參數(shù)是對(duì)象，那么就將第二個(gè)參數(shù)作為props進(jìn)行處理
            return createVNode(type, propsOrChildren);
        } else {
            // 如果第二個(gè)參數(shù)是數(shù)組，那么就將第二個(gè)參數(shù)作為子節(jié)點(diǎn)進(jìn)行處理
            return createVNode(type, null, propsOrChildren);
        }
    } else {
        // 如果參數(shù)數(shù)量不是2
        if (l > 3) {
            // 并且參數(shù)數(shù)量大于3，那么就將第三個(gè)參數(shù)以及后面的參數(shù)作為子節(jié)點(diǎn)進(jìn)行處理
            children = Array.prototype.slice.call(arguments, 2);
        } else if (l === 3 && isVNode(children)) {
            // 如果參數(shù)數(shù)量等于3，并且第三個(gè)參數(shù)是虛擬dom，那么就將第三個(gè)參數(shù)作為子節(jié)點(diǎn)進(jìn)行處理
            children = [children];
        }
        // 最后將第二個(gè)參數(shù)作為props，其余的參數(shù)作為子節(jié)點(diǎn)進(jìn)行處理
        return createVNode(type, propsOrChildren, children);
    }
}

function _createVNode(type, props = null, children = null, patchFlag = 0, dynamicProps = null, isBlockNode = false) {
    // 獲取 shapeFlag
    const shapeFlag = isString(type) ? 1 :
        isSuspense(type) ? 128 :
            isTeleport(type) ? 64 :
                isObject(type) ? 4 :
                    isFunction(type) ? 2 : 0;
    // 如果是一個(gè)組件，并且還被設(shè)置成響應(yīng)式的了，則會(huì)提示并解包
    if (shapeFlag & 4 && isProxy(type)) {
        type = toRaw(type);
        warn(
            `Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with \`markRaw\` or using \`shallowRef\` instead of \`ref\`.`,
            `
Component that was made reactive: `,
            type
        );
    }
    // 最后調(diào)用 createBaseVNode 創(chuàng)建 VNode
    return createBaseVNode(
        type,
        props,
        children,
        patchFlag,
        dynamicProps,
        shapeFlag,
        isBlockNode,
        true
    );
}

// packages\shared\src\shapeFlags.ts
export const enum ShapeFlags {
    ELEMENT = 1, // 普通dom元素  二進(jìn)制：0000 0001  十進(jìn)制：1
    FUNCTIONAL_COMPONENT = 1 << 1, // 函數(shù)組件  二進(jìn)制：0000 0010  十進(jìn)制：2
    STATEFUL_COMPONENT = 1 << 2, // 有狀態(tài)組件  二進(jìn)制：0000 0100  十進(jìn)制：4
    TEXT_CHILDREN = 1 << 3, // 文本子節(jié)點(diǎn)  二進(jìn)制：0000 1000  十進(jìn)制：8
    ARRAY_CHILDREN = 1 << 4, // 數(shù)組子節(jié)點(diǎn)  二進(jìn)制：0001 0000  十進(jìn)制：16
    SLOTS_CHILDREN = 1 << 5, // 插槽  二進(jìn)制：0010 0000  十進(jìn)制：32
    TELEPORT = 1 << 6, // TELEPORT組件  二進(jìn)制：0100 0000  十進(jìn)制：64
    SUSPENSE = 1 << 7, // SUSPENSE組件  二進(jìn)制：1000 0000  十進(jìn)制：128
    COMPONENT_SHOULD_KEEP_ALIVE = 1 << 8, // 沒(méi)弄清  二進(jìn)制：0001 0000 0000  十進(jìn)制：256
    COMPONENT_KEPT_ALIVE = 1 << 9, // 沒(méi)弄清  二進(jìn)制：0010 0000 0000  十進(jìn)制：512
    COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT // 普通組件，應(yīng)該是有狀態(tài)組件和函數(shù)組件的并集
}

    const {h} = Vue;
// 普通元素
const element = h('div');
console.log('ELEMENT', element.shapeFlag);
// 函數(shù)式組件
const functionalComponent = h(() => h('div'));
console.log('FUNCTIONAL_COMPONENT', functionalComponent.shapeFlag);
// 有狀態(tài)組件
const statefulComponent = h({
    render() {
        return h('div');
    }
});
console.log('STATEFUL_COMPONENT', statefulComponent.shapeFlag);
// 文本子節(jié)點(diǎn)
const textChildren = h('div', 'text');
console.log('TEXT_CHILDREN', textChildren.shapeFlag);
// 數(shù)組子節(jié)點(diǎn)
const arrayChildren = h('div', [h('span'), h('span')]);
console.log('ARRAY_CHILDREN', arrayChildren.shapeFlag);
// 插槽子節(jié)點(diǎn)
const slotsChildren = h({
    render() {
        return h('div', this.$slots.default());
    }
}, null, () => 'slotChildren');
console.log('SLOTS_CHILDREN', slotsChildren.shapeFlag);
// teleport組件
const teleport = h(Vue.Teleport);
console.log('TELEPORT', teleport.shapeFlag);
// suspense組件
const suspense = h(Vue.Suspense);
console.log('SUSPENSE', suspense.shapeFlag);

function createBaseVNode(type, props = null, children = null, patchFlag = 0, dynamicProps = null, shapeFlag = type === Fragment ? 0 : 1, isBlockNode = false, needFullChildrenNormalization = false) {
    // 定義 vnode
    const vnode = {
        __v_isVNode: true,
        __v_skip: true,
        type,
        props,
        key: props && normalizeKey(props),
        ref: props && normalizeRef(props),
        scopeId: currentScopeId,
        slotScopeIds: null,
        children,
        component: null,
        suspense: null,
        ssContent: null,
        ssFallback: null,
        dirs: null,
        transition: null,
        el: null,
        anchor: null,
        target: null,
        targetAnchor: null,
        staticCount: 0,
        shapeFlag,
        patchFlag,
        dynamicProps,
        dynamicChildren: null,
        appContext: null,
        ctx: currentRenderingInstance
    };
    // 普通節(jié)點(diǎn)固定走這個(gè)分支
    if (needFullChildrenNormalization) {
        // 使用 normalizeChildren 處理 children
        normalizeChildren(vnode, children);
    }
    // 最后返回 vnode
    return vnode;
}

function normalizeChildren(vnode, children) {
    let type = 0;
    const { shapeFlag } = vnode;
    if (children == null) {
        // ...
    } else if (isArray(children)) {
        // ...
    } else if (typeof children === "object") {
        // ...
    } else if (isFunction(children)) {
        // ...
    } else {
        // 走到這里，說(shuō)明 children 需要被規(guī)范為文本節(jié)點(diǎn)
        // 直接轉(zhuǎn)為字符串
        children = String(children);
        // 如果是 teleport ，子節(jié)點(diǎn)會(huì)被標(biāo)記為 16，也就是數(shù)組節(jié)點(diǎn)
        if (shapeFlag & 64) {
            type = 16;
            // 這里會(huì)將 children 轉(zhuǎn)為數(shù)組
            children = [createTextVNode(children)];
        } else {
            // 如果是普通節(jié)點(diǎn)，直接標(biāo)記為文本節(jié)點(diǎn)，也就是 8
            type = 8;
        }
    }
    // 最后將 children 賦值給 vnode.children
    vnode.children = children;
    // 然后將 type 的值進(jìn)行或運(yùn)算，賦值給 vnode.shapeFlag
    vnode.shapeFlag |= type;
}

if (shapeFlag & 8) {
    // ...
}

# 這是 ELEMENT 和 TEXT_CHILDREN 合并的值
0000 1001
# 這是 ELEMENT 的值
0000 0001
# 進(jìn)行與運(yùn)算
0000 1001
&&&& &&&&
0000 0001
= = = = =
0000 0001