vue2调试源码

watcher底层原理

如何调试源码

package.json 添加了--sourcemap

"scripts": {
	"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev --sourcemap"
}

新增html文件

<script src="./dist/vue.js"></script>
<div id="app">{{a.b}}</div>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      a: {
        b: 1,
      },
    },
    mounted() {
      this.a.b = 2;
    },
  });
</script>

入口文件在哪里
源码入口文件 scripts/config.js里查找web-full-dev，于是如果js文件为 entry-runtime-with-compiler.js

ctrl+shift+p 输入文件名字 就可以找到该文件
很多时候会用到别名，想快速找到该文件可以复制路径和上面的方法一样 也可以找到
import { warn, cached } from 'core/util/index'
别名文件是alias.js 其中一个别名如下core: resolve('src/core'),