调用链通过 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)
}
}
