vue 3.0的components.ts

export function createComponentInstance(vnode){
    const instance={
        vnode,
        type:vnode.type,
        props:{},
        attrs:{},
        slots:{},
        setupState:{},    //如果setup返回一个对象，这个对象会作为setUpstate
        ctx:{},
        isMounted:false,   //表示这个组件是否挂载过
        render:null
    }

    instance.ctx={_:instance}

    // props 和attrs 有什么区别？vnode.props中是包含props和attrs
    // webcomponent 组件需要有属性，插槽
    return instance;
}

export function setupComponent(instance){
    //
    const {props,children}=instance.vnode;   //type,props,children

    //根据props解析出props和attrs 将其放到instance上
    instance.props=props;    //initProps()
    instance.children=children;  //插槽的解析  initSlot()

    //需要先看一下  当前组件是不是有状态的组件，函数组件
    let isStateful=instance.vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONEENT

    if (isStateful){   //表示现在是一个带状态的组件
        //调用当前实例的setup方法，用setup的返回值 填充setupState和对应的render方法
        setupStatefulComponent(instance);
    }

}

function setupStatefulComponent(instance){
    //代理  传递给render函数的参数

    //2.获取组件的类型，拿到组件setup方法
    let {Component}=instance.type;
    let {setup}=Component;

    let setupContext=createContext(instance);
    setup(instance.props,setupContext);
}

function createContext(instance){
    return {
        attrs:instance.attrs,
        slots:instance.slots,
        props:instance.props,
        emit:()=>{},
        expose:()=>{}
    }
}