vue 3.0的components.ts
export function createComponentInstance(vnode){const instance={vnode,type:vnode.type,props:{},attrs:{},slots:{},setupState:{},//如果setup返回一个对象,这个对象会作为setUpstatectx:{},isMounte.
·
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:()=>{}
}
}
更多推荐
已为社区贡献8条内容
所有评论(0)