Vue3源码解析——前置工作千呼万唤始出来，犹抱琵琶半遮面... 准备工作如何调试源码？第一步先把代码拉下来 hh

千呼万唤始出来，犹抱琵琶半遮面...

准备工作

如何调试源码？

第一步 先把代码拉下来 hhh Vue v3.2.37

第二步 跑项目

// 我本地是 node 16.14.2的版本
npm i -g pnpm

//下载依赖
pnpm i

//跑项目
pnpm dev

第三步 添加测试文件

//在以下路径添加文件夹以及html文件 如下图所示
\packages\vue\examples

//引入js文件
  <script src="../../dist/vue.global.js"></script>

第四步 添加相应代码以下已响应式为例

//添加代码
<body>
  <div id="app"></div>
  <script>
    const { reactive, effect } = Vue

    const obj = reactive({
      count: 0
    })

    effect(() => {
      document.querySelector('#app').innerHTML = obj.count
    })

    setTimeout(() => {
      obj.count = 22
    }, 2000)
  </script>
</body>

然后，就打开控制台可以调试啦

项目目录

packages：这个目录包含了 Vue 3 的源码
- compiler-core: 编译器的核心代码。
- compiler-dom:将模板编译为渲染函数，生成可在浏览器中执行的 JavaScript 代码。
- compiler-sfc:将 .vue 文件中的模板、脚本和样式部分进行解析和编译。
- compiler-ssr:服务器端渲染（SSR）编译器。它的主要作用是将组件编译成用于服务器端渲染的渲染函数。
- reactivity: 响应式系统的实现。
- runtime-core: 运行时核心代码，包括虚拟 DOM 的处理和组件实例的创建等。
- runtime-dom: 负责处理浏览器环境下的运行时逻辑。
- shared: 共享的工具函数和代码。
- server-renderer: 与服务器端渲染相关的代码。
scripts: 包含构建和测试脚本。