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

xiaoxiao2021-02-28  9

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函数中

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

转载请注明原文地址: https://www.6miu.com/read-2150022.html

最新回复(0)