vue2.x源码解析准备--对源码进行debugger

1.debugger源代码

我们学习vue源码采用的是Runtime+Compiler的版本
当我们vue-cli创建完成后

build/webpack.base.conf.js中

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

我们知道了引入的vue.js文件是node_modules/vue/dist/vue.esm.js

node_modules/vue/dist/vue.esm.js：

function initMixin (Vue) {
  Vue.prototype._init = function (options) {
    debugger
    var vm = this;
    // a uid
    vm._uid = uid$3++;
    .
    .
    .
  }
}

我们在initMixin函数的 Vue.prototype._init中加入‘debugger’，接下来我们就可以加入断点了

2.1 断点操作时按钮的含义

第一个按钮：
直接跳到下一个断点

第二个按钮
是步径的，会跳过函数
例如：

function asd() {
    init();
    console.log()
}

会跳过init();里面的代码

第三个按钮
一行一行代码执行的，例如上面的例子，就会直接进到init函数中

按钮的下面
是函数的调用关系