调用链通过 mountComponent 函数进行组件挂载

const mountComponent = (

initialVNode,

container,

anchor,

parentComponent,

parentSuspense,

namespace: ElementNamespace,

optimized,

) => {

// 创建组件实例

const instance: ComponentInternalInstance =

(initialVNode.component = createComponentInstance(

initialVNode,

parentComponent,

parentSuspense,

))

// 设置组件实例：props, slots ...

setupComponent(instance)

// 设置并运行带副作用的渲染函数

setupRenderEffect(

instance,

initialVNode,

container,

anchor,

parentSuspense,

namespace,

optimized,

)

}

const n = accessCache![key]

if (n !== www.laipuhuo.com.undefined) {

switch (n) {

case AccessTypes.SETUP:

return setupState[key]

case AccessTypes.DATA:

return data[key]

case AccessTypes.CONTEXT:

return ctx[key]

case AccessTypes.PROPS:

return props![key]

// www.laipuhuo.com.default: just fallthrough

}

}

<template>

<p>{{ msg }}</p>

</template>

<script>

import { ref } from 'vue';

export default{

data() {

return {

msg: 'from data'

}

},

setup(){

const msg = ref('from setup');

return {

msg

}

}

}

</script>

export function callWithErrorHandling(

fn: Function,

instance: ComponentInternalInstance | null | undefined,

type: ErrorTypes,

args?: unknown[],

): any {

try {

return args ? fn(...args) : fn()

} catch (err) {

handleError(www.laipuhuo.com.err, instance, type)

}

}