深入 Vue3 源码，学习初始化流程

搭建调试环境

为了弄清楚 Vue3 的初始化，建议先克隆 Vue3 到本地。

git clone https://github.com/vuejs/vue-next.git

安装依赖

npm install

修改 package.json，将 dev 命令加上 --sourcemap 方便调试，并运行 npm run dev

// package.json
// ...
"scripts": {
   
  "dev": "node scripts/dev.js --sourcemap",
  // ...
}
// ...

在 packages/vue 目录下增加 index.html，内容如下

<!-- index.html -->
<div id="app">
  {
  { count }}
</div>
<script src="./dist/vue.global.js"></script>
<script>
  Vue.createApp({
     
    setup() {
     
      const count = Vue.ref(0);
      return {
      count };
    }
  }).mount('#app');
</script>

在浏览器打开 index.html，程序正常运行则可以开始进行下一步调试。

进行调试

假如在下面的流程中迷失了方向，建议先看一下结尾的总结，再回过头来看这一段。

调试

在 createApp 的位置打上断点，然后刷新页面进断点，开始调试。

具体大家可以自行调试，我在这里就大概描述一下初始化流程。

createApp

进入 createApp 内部，会跳转到 packages/runtime-dom/src/index.ts 的 createApp，执行完成返回 app 实例。

// packages/runtime-dom/src/index.ts
export const createApp = ((...args) => {
   
  const app = ensureRenderer().createApp(...args)
  // ...
  return app
}) as CreateAppFunction<Element>

接下来继续看 ensureRenderer 的实现。

// packages/runtime-dom/src/index.ts
function ensureRenderer() {
   
  return (
    renderer ||
    (renderer = createRenderer<Node, Element | ShadowRoot