【Vue原理】看Vue源码，不会调试不行啊

avwu 发布于2019-08-23 18:20 / 3144人阅读

摘要：写文章不容易，点个赞呗兄弟专注源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于版本如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧原理学会调试源码调试是程序猿必备的技

写文章不容易，点个赞呗兄弟
专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧
研究基于 Vue版本 【2.5.17】

如果你觉得排版难看，请点击 下面链接 或者拉到下面关注公众号也可以吧

【Vue原理】学会调试Vue源码

调试是程序猿必备的技能，如果你不会调试，你的下场就是.........

嗯，一样可以拿高工资............

不过据我了解，连张鑫旭大佬都喜欢使用 console.log 调试，但是你以为别人不用，你就以为别人不会吗，你真的太天真了....

下面的评论也是...看来同是天涯沦落人

我在项目中也是使用 console.log 调试啊，但是阅读源码不一样啊，你试试一直用 console.log 调试，搞不死你

好了，进入正题....

进入VSCode调试界面

是是是，让我们把眼睛移动到 VSCODE 左边活动栏这边

1、有个小虫，点击进入调试界面

2、或者按快捷键， ctrl+shift+D

错！其实第一步你应该打开 VSCode

创建调试配置文件

点击这个小设置按钮

之后，会弹窗，让你选择调试的类型，我们选择 Chrome ，骚年

Duang 的一声，你会发现自动生成了一个配置文件

然后这一步你就成功了呗....到下一步了

配置调试配置文件

配置文件有很多选项，我只给出最简单的可以使用的版本

{    
    "version": "0.2.0",    
    "configurations": [
        {            
            "type": "chrome",            
            "request": "launch",            
            "name": "调试 Vue 的调用走向",            
            "file": "${workspaceRoot}/index.html",
        }
    ]
}

解释一下 ( • ̀ω•́ )✧

type

是你调试类型，你调试的是网页，还是调试 node。

现在我们调试网页，所以选择 Chrome

name

调试名称，随你起名字，起个 xxxxxx

file

本地文件路径，调试本地文件（ workspaceRoot 是项目根目录，以此来确定你的 html 调试页面相对路径）

开始调试

打断点

在文件的序号一栏的左边，可以标记红色断点

然后可以在序号栏左边，看到你打的所有断点

启动调试

点击下面的按钮，立即启动调试，等个几秒钟？？

启动成功

然后你发现谷歌浏览器被自动启动了，然后你就成功了兄弟

看得到浏览器的 url 是你的硬盘绝对路径，也就是你在配置文件里面配置的

TIP：如果你启动调试期间出现什么问题，不要怕，度娘或者谷哥，资料很多，我也碰到很多问题，很正常

(～￣▽￣)～

调试工具栏

启动调试成功之后，你可以看到这个工具栏的出现

我们来一个个看每个按钮都是什么作用

继续，跳断点，从一个断点跳到另一个断点

单步跳过

跳过函数执行，就是不进入函数内部，直接执行完函数，跳到函数下一个语句

TIP：但是如果你在这个函数的内部打了断点，点击【单步跳过】你还是会进入函数内部，然后跳到函数内部最近那个断点那行

ヾ(●´∀｀●)

单步跳出

跳出单签函数体，如果当前调试已经进入了某个函数，那么立即执行完当前函数，并跳出这个函数

TIP：但是如果你在这个函数的内部打了断点，你可能跳不出去，而是跳到这个函数内部最近的一个断点

重启，重新启动调试，从头开始

停止，关闭调试

举栗子 (´･ᴗ･`)

准备好文件

index.html，越短越好

index.js

function fn1(name){    
var result = name+" fn1 处理过 "
    fn2(result)
}
function fn2(arg){    
return arg +" fn2 处理过 "
}
fn1("hoho")

01 新建调试文件 launch.json

{    
       "version": "0.2.0",    
       "configurations": [
        {            
           "type": "chrome",            
           "request": "launch",            
           "name": "调试Demo",            
           "file": "${workspaceRoot}/index.html",
        }
    ]
}

02 打断点

03 启动调试，来到第一个断点

04 开始调试

先讲按钮使用流程

现在执行到 fn1 函数这一行，但是 fn1 还没执行

此时点击

执行 fn1，进入 fn1 函数内部

进入 fn1 之后

一直点击，直到执行到 fn2 语句

像下面这样，有条黄线，就表示执行到哪条语句

1、点击，会立即执行完 fn2 ，不进入 fn2

2、点击

，会进入 fn2

如果进入了 fn2 之后

点击

，会立即执行完 fn2 函数，跳出 fn2 函数内部

现在，我们

三个按钮都使用过了，还剩

我们在 fn2 处打多一个一个断点，然后重启

你能看到现在又是停到了第一个断点处

此时，你的小手一按

，于是你便跳到了刚打的第二个断点

观察变量值

1、可以把鼠标移动到某个变量上，会显示一个弹窗，弹窗内容是变量的值

2、或者可以查看左栏调试栏的变量

观察函数调用流程

同样是查看左边的调试栏，中的调用堆栈，可以看到函数调用的顺序

明显可以看到先调用 fn1，在调用 fn2

好的，如果你有跟着做的，相信你已经入门了兄弟，是不是十分钟从入门到精通？？

调试Vue准备

index.html

引用 vue 文件、引用 vue.test.js 文件

vue.js

去官网下载生产版本即可

vue.test.js

作用是调用vue，创建一个简单的应用，现在给一个简单的模板

new Vue({    
    el:".a",
    data(){        
        return {            
            name:1
        }
    },    
    methods:{
        getName(){            
            this.name="修改----我是父组件a"
        },
    },
})

现在，你可以尽情去 vue 里面去打断点啦，额..... 虽然现在你还不知道打什么断点，不过不用怕！后面每次讲一块内容，你就可以去自己尝试啦

结尾

好的，本次讲解完毕，调试就是这么简单，真的没有什么难的，

最后有什么不对的地方，感谢指出

希望本文会对你有帮助

好的，谢幕了

GPU云服务器云服务器 vue源码 vue webrtc 源码 Vue_Vue Vue

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105058.html

jquery源码分析

摘要：前言随着前端的不断发展，很多开发人员已经开始使用等框架，但是很少有人去深入分析以及的源码本人也是，至今还停留在使用的层面。最近还在写一些的笔记，有兴趣的小白也可以看下我的博客文章源码分析地址前言随着前端的不断发展，很多开发人员已经开始使用react、vue等web框架，但是很少有人去深入分析vue以及react的源码（本人也是，至今还停留在使用的层面）。框架的使用势必会有更新迭代的...

SHERlocked93 2019-08-22 16:35 评论0 收藏0
前端架构师亲述：前端工程师成长之路的 N 问及回答

摘要：问题回答者黄轶，目前就职于公司担任前端架构师，曾就职于滴滴和百度，毕业于北京科技大学。最后附上链接问题我目前是一名后端工程师，工作快五年了。 showImg(https://segmentfault.com/img/bVbuaiP?w=1240&h=620); 问题回答者：黄轶，目前就职于 Zoom 公司担任前端架构师，曾就职于滴滴和百度，毕业于北京科技大学。 1. 前端开发问题大...

crossoverJie 2019-08-23 18:14 评论0 收藏0
【Vue原理】Vue源码阅读总结大会 - 序

摘要：扎实基础幸好自己之前花了大力气去给自己打基础，让自己现在的基础还算不错。写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版本【2.5.17】如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧【Vue原理】Vue源码阅读总结大会 - 序阅读源码是需...

Edison 2019-08-23 18:18 评论0 收藏0
【Vue原理】VModel - 源码版之 select 详解

摘要：写文章不容易，点个赞呗兄弟专注源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于版本如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧原理源码版之详解今天我们来看看处写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 ...

lsxiao 2019-08-23 18:25 评论0 收藏0
【Vue原理】VModel - 源码版之input详解

摘要：因为失去焦点之后被强制更新了一波嗯，这就是的作用，把页面上的显示值也过滤一遍写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版本【2.5.17】如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧【Vue原理】VModel - 源码版之input详...

leanxi 2019-08-23 18:25 评论0 收藏0