Vue3源码学习笔记—— Vue.createApp(App) 和 app.mount(“#app“)（一）

本篇文章为 Vue.createApp(App) 和 app.mount("#app") 的阅读准备。

0ooorange

2879人浏览 · 2022-08-10 21:55:55

0ooorange · 2022-08-10 21:55:55 发布

前言

该系列文章为个人学习总结，如有错误，欢迎指正；尚有不足，请多指教！

准备

下载 `Vue` 源码

源码地址：https://github.com/vuejs/vue 。

将 gitup 上的源码 clone 到本地：

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

安装依赖

执行以下命令，安装依赖：

pnpm install

source map

在 package.json -> scripts -> dev 命令中添加 --sourcemap ，添加后，在 packages -> vue -> dist 中会生成对应的映射文件，在调试源码时，便可以查看当前代码在源码中的位置。

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

运行 demo

打包

执行以下命令，启动开发环境：

pnpm run dev

编写并运行 demo

在 packages -> vue -> examples 文件夹中新建一个 demo 文件夹，在 demo 文件夹中新建 demo.html 文件，编写代码基本结构以及 vue 代码，运行到浏览器。下面我们的代码都通过这个 demo 来进行测试、观察。

...
<body>
  <div id="app"></div>
  <template id="my-app">
    <h2>Oooorange</h2>
    <p>{{message}}</p>
    <button @click="changeMessage">修改message</button>
  </template>

  <!-- 引用刚才打包的源代码, 同目录下的.map文件无需引用，因为浏览器会自动加载该.map文件 -->
  <script src="../../dist/vue.global.js"></script>
  <script>
    // 1.定义的根组件
    const App = {
      template: `#my-app`,
      data() {
        return {
          message: "Hello, World!"
        }
      },
      methods: {
        changeMessage() {
          this.message = "Hello, Oooorange!"
        }
      }
    }

    // 2.将App组件交给vue来进行处理，属于是对dom进行操作，所以原函数存在于runtime-dom中
    // 2.1.createApp(App)函数
    const app = Vue.createApp(App);
    // 2.2.调用app的mount函数
    app.mount("#app");
  </script>
</body>
...

运行后可以看到定义的组件成功渲染在浏览器上，如图所示。

在这里插入图片描述

总结

以上就是阅读 Vue.createApp(App) 和 app.mount(“#app”) 的准备，接下来两篇文章我们将对 demo 中 Vue.createApp(App) 及 app.mount("#app") 的内部实现原理进行分析。

戳链接直达

Vue3源码学习笔记—— Vue.createApp(App) 和 app.mount(“#app”)（二） - 掘金 (juejin.cn)