带你看Vue3源码: Vue.createApp究竟做了什么

文章首发：https://juejin.cn/post/6991461000033599495

笔者在上一篇文章《debug一下，你就学会高效阅读开源项目代码～》中以 Vue3 源码调试配置为案例，给大家介绍了调试的基本配置以及强调了其在查看源码过程中的重要性。本文将使用调试的技巧，在不需要详细了解完整代码实现的前提下，快速了解 Vue3 的执行流程。

最简单的代码

众所周知，调用 Vue.createApp 方法便创建了一个 Vue3 应用，本文从这个方法入手，一步一步剖析该方法在源码中的实现，从而使得大家能够了解 Vue3 整体的执行流程。

首先，在源码目录创建 packages/vue/examples/hello.html 文件：

<script src="../dist/vue.global.js"></script>

<div id="demo">{
  {text}}</div>

<script>
  debugger
  Vue.createApp({
     
    data: () => ({
     
      text: 'hello world'
    })
  }).mount('#demo')
</script>

代码功能非常简单：在页面中打印 hello world 字符串。这里在执行 Vue.createApp 前插入 debugger 代码，使得代码执行在 debugger 处暂停下来。

调试开始

这里还是贴一下调试的配置，如需更详细的了解调试原理和流程，请访问笔者上一篇文章：《debug一下，你就学会高效阅读开源项目代码～》。

{
   
  "version": "0.2.0",
  "configurations": [
    {
   
      "type": "chrome",
      "request": "launch",
      "name": "Launch hello",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}",
      "file": "${workspaceFolder}/packages/vue/examples/hello.html"
    }
  ]
}

点击调试按钮，程序在 debugger 处暂停，然后执行到 Vue.createApp 处单步进入，断点进入到 packages/