源码环境

从github上拉取代码，它采用pnpm的方式去管理仓库，然后pnpm install安装依赖包，通过执行npm run build打包，会在core/packages/vue下生成dist文件（build的产物），在examples下参考其它用例开始写代码，直接浏览器打开访问，通过打断点的方式来熟悉执行流程。

初次渲染流程

入口

入口： $\color{red}{createApp}$ ，所在目录runtime-dom/src/index.ts 返回：app是一个对象，含有mount方法

const createApp = (...args) => {
    const app = enSureRenderer().createApp(...args)
    app.mount = function() {**}
    return app
}

app来源

app来源： $\color{red}{enSureRenderer -> createApp}$ ，通过上面的截图可以看出是enSureRenderer方法返回包含了createApp方法，而这里的createApp才是真正的生成app

这里的enSureRenderer -> createRenderer -> baseCreateRenderer中间只是包裹了一层，真正执行的是runtime-core/src/renderer.ts中的baseCreateRenderer

通过上图，可以看到有多个baseCreateRenderer，但前两个是声明，真正执行的是最后一个且代码量2k+，因为通过runtime-dom/src/index.ts中createApp中的函数知道它返回的有createApp对象

通过上图，它返回的含有render/hydrate/createApp三个函数

    const enSureRenderer = {
        return {
            render: **,
            hydrate: **,
            createApp: createAppAPI(render, hydrate)
        }
    }