vue3源码调试方法

1、下载最新源码，官网

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

2、下载pnpm，这个是vue3使用的包管理工具，官网

curl -fsSL https://get.pnpm.io/install.sh | sh -

另：如果直接用yarn instal会报错，因此要如上使用pnpm

$ yarn install
yarn install v1.22.19
info No lockfile found.
$ node ./scripts/preinstall.js
This repository requires using pnpm as the package manager for scripts to work properly.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

3、安装依赖

pnpm install

这个执行完也不需要yarn install 了直接启动项目

4、config.json添加sourceMap

// config.json
"dev": "node scripts/dev.js",
改为
"dev": "node scripts/dev.js --sourcemap",

5、启动项目

npm run serve

显示如下的时候就可以调试了：

6、浏览器打开后显示如下界面，点击package/example/下任意文件（其实项目的任意文件都可以）

vue自带的example都是vue2的，于是测试一个简单的vue3 demo：

<script src="../../dist/vue.global.js"></script>
  <div id="app">
    <p>{{ state.counter }}</p>
  </div>
<script>
  const app = Vue.createApp({
    setup() {
      debugger
      const original = Vue.reactive({
        counter: 1
      })
      // 测试 isReadonly
      const copy = readonly(original)

      setInterval(() => {
        state.counter++
      }, 1000)

      Vue.watch(() => state.counter, () => {})

      return {
        state
      }
    }
  }).mount('#app')
</script>