操作步骤
基于 vue3.2.37 版本，代码下载好后，进行以下步骤：
-
安装 pnpm：
npm i -g pnpmNode.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 仓库，再提交一次代码
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 文件：
<script src="../../dist/vue.global.js"></script>确保
../../dist指向正确的vue.global.js文件，路径层级根据项目根目录调整 -
编写测试案例进行调试
案例
案例如下：
<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(() => {debuggerdocument.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 内部响应式系统的执行流程
