vue3.2.37源码调试步骤

ZoeLandia2025-03-07 16:31

操作步骤

基于 vue3.2.37 版本，代码下载好后，进行以下步骤：

安装 pnpm：npm i -g pnpm

Node.js 版本建议 >= 16.5.0

Vue3.2 使用 pnpm

之前电脑没有安装 pnpm 的需要安装，安装过的就下一步
安装依赖：pnpm i
package.json 文件中"build": "node scripts/build.js"配置中末尾添加 -s 开启sourcemap

需生成 sourcemap 文件以映射压缩代码到源码
打包生成 vue 文件：npm run build

执行后报以下错误：当前目录不是一个有效的 Git 仓库，缺少 .git 文件夹

解决方案：初始化一个 git 仓库，再提交一次代码
csharp 复制代码
```
git init
git add .
git commit -m "Initial commit"
```
初始化后再执行npm run build，完成后需检查 dist 目录是否生成vue.global.js和 vue.global.js.map（sourcemap 文件）
packages/vue/examples 文件下创建 learning 文件夹
learning 文件夹下创建 index.html 文件
引入 vue 全局构建文件

在 index.html 的或中，添加以下脚本引入打包后的 Vue 文件：
xml 复制代码
```
<script src="../../dist/vue.global.js"></script>
```
确保../../dist指向正确的vue.global.js文件，路径层级根据项目根目录调整
编写测试案例进行调试

案例

案例如下：

xml 复制代码

<body>
    <div id="app"></div>
    <script src="../../dist/vue.global.js"></script>
    <script>
      const { reactive, effect, createApp } = Vue
  
      // 创建响应式对象
      const obj = reactive({ name: 'HelloVue3' })
  
      // 创建Vue应用实例并挂载
      const app = createApp({
        setup() {
          effect(() => {
            debugger
            document.querySelector('#app').innerHTML = obj.name
          })
          return { obj }
        }
      })
      app.mount('#app')
  
      // 模拟数据变化
      setTimeout(() => {
        obj.name = 'DataChanged'
      }, 2000)
    </script>
</body>

在 effect 处打断点，按 F12 切换到 sources 面板，找到 vue.global.js 或映射的源码文件，如：packages/reactivity/src/ref.ts

代码效果是刚开始展示的是 HelloVue3，随后变成 DataChanged，在effect或reactive的源码位置打断点，可逐步跟踪 Vue3 内部响应式系统的执行流程