vue3源码-从调试开始本文提供了探索vue源码的两种方式，一种是通过soucemap，另一种是通过Jest Runne

本文提供了探索vue源码的两种方式，一种是通过soucemap，另一种是通过Jest Runner.

1. 下载vue3源码（vue-next）

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

2. 配置package.json

在scripts节点下添加 "dev:sourcemap": "node scripts/dev.js --sourcemap"，这样sourcemap就生成了。

bundles xx\vue-next\packages\vue\src\index.ts → packages\vue\dist\vue.global.js...
created packages\vue\dist\vue.global.js in 3s

3. 测试

新建一个html文件：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Vue 调试测试</title>
  <script src="../packages/vue/dist/vue.global.js"></script>
</head>

<body>
  <div id="test-vue" class="demo">
    {{ message }}
  </div>
  <script>
    const VueApp = {
      data() {
        return {
          message: 'Hello Vue!!'
        }
      }
    }

    Vue.createApp(VueApp).mount('#test-vue')
  </script>
</body>

</html>

在Vue.createApp(VueApp).mount('#test-vue')设置断点，f11就可以调到源码里了。

4. 通过测试用例

有时候我们为了方便，不需要创建html或者vue文件，而是直接在_tests_文件夹测试文件里添加测试用例

4.1 安装vscode 插件 Jest Runner

4.2 安装完后就会在测试方法上显示了Debug提示，直接点击就可以调试了。

最后祝大家学习愉快~~~