让ChatGPT解读Vue3源码过程解析.docxVIP

第

让ChatGPT解读Vue3源码过程解析

目录前言实战setup小结总结

前言

ChatGPT最近十分火爆，今天我也来让ChatGPT帮我阅读一下Vue3的源代码。

都知道Vue3组件有一个setup函数。那么它内部做了什么呢，今天跟随ChatGPT来一探究竟。

实战

setup

setup函数在什么位置呢，我们不知道他的实现函数名称，于是问一下ChatGPT：

ChatGPT告诉我，setup函数在packages/runtime-core/src/component.ts文件中。众所周知，runtime-core是Vue3的运行时核心代码。我们进去看一眼。

按照它所说的，我们找到了setupComponent和createComponentInstance函数，并没有找到setupRenderEffect函数，ChatGPT的只知道2025年以前的知识，Vue3代码经过了很多变动，不过没关系，这不影响太多。

ChatGPT告诉我，setupComponent函数是在createComponentInstance函数中执行的，createComponentInstance看名字是创建组件实例，看一下详细代码。

直接复制给ChatGPT：

我们根据ChatGPT的解释来阅读代码，发现createComponentInstance只是创建了组件的实例并返回。并没有像它上面说的在函数中执行了setupComponent，笨笨的ChatGPT。

那就自己找一下setupComponent是在哪里被调用的。

可以packages/runtime-core/搜一下函数名，很快就找到了。在packages/runtime-core/src/renderer.ts文件中的mountComponent函数中。

mountComponent是挂载组件的方法，前面还有一堆自定义渲染器的逻辑，不在此篇展开。

constmountComponent:MountComponentFn=(...args)={

constinstance:ComponentInternalInstance=

compatMountInstance||

(initialVNponent=createComponentInstance(

initialVNode,

parentComponent,

parentSuspense

//...省略代码

//resolvepropsandslotsforsetupcontext

if(!(__COMPAT__compatMountInstance)){

//...这里调用了setupComponent，传入了实例，还写了注释，感人

setupComponent(instance)

//setupRenderEffect居然也在这

setupRenderEffect(

instance,

initialVNode,

container,

anchor,

parentSuspense,

isSVG,

optimized

mountComponent函数先调用了createComponentInstance，返回个组件实例，又把实例当作参数传给了setupComponent。顺便我们还在这发现了ChatGPT搞丢的setupRenderEffect函数，它是用来处理一些渲染副作用的。

回到setupComponent函数，Evan的注释告诉我们它是处理props和slots的。

exportfunctionsetupComponent(

instance:ComponentInternalInstance,

isSSR=false

isInSSRComponentSetup=isSSR

const{props,children}=instance.vnode

constisStateful=isStatefulComponent(instance)

initProps(instance,props,isStateful,isSSR)

initSlots(instance,children)

constsetupResult=isSt