vue3源码解读--setup

目录

    vue2源码

    vue3源码

示例

源码

    显然setup函数是作为组件的options传入的,故我们将代码定位到applyOptions

    哦豁~~

    并没有发现对setup的处理……

    通过走断点,在setupStatefulComponent内发现了对setup函数的读取处理

    在匡红1的位置,判断我们是否传入了参数2,并据此获取context并在下一步作为参数传入以便我们在代码中能正确读入

    匡红2的位置,则去执行了我们代码中书写的setup函数并拿到返回值lastMsg

    最后调用handleSetupResult将setup的返回值挂载到实例

    之后通过compile函数将template转化为render,至此完成初始化逻辑,进行组件mount流程,这将执行render函数对模板中使用到的值作访问

总结

    在初始化过程中读取options配置项拿到setup定义--执行setup函数获取返回值--对返回值做一次proxy代理--将返回值传入render函数

你可能感兴趣的:(vue3源码解读--setup)