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

时间 2019-11-07

标签 Vue原理学会调试 vue 源码繁體版

原文原文链接

专一 Vue 源码分享，为了方便你们理解，分为了白话版和源码版，白话版能够轻松理解工做原理和设计思想，源码版能够更清楚内部操做和 Vue的美，喜欢我就关注个人公众号，公众号的文章，排版更好看javascript

若是你以为排版难看，请点击下面连接移步公众号，另附上公众号二维码
html

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

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

嗯，同样能够拿高工资............java

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

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

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

好了，进入正题....浏览器

进入VSCode调试界面

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

一、有个小虫，点击进入调试界面函数

二、或者按快捷键， 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，越短越好

<script src="./index.js"></script>复制代码

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 语句

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

一、点击，会当即执行完 fn2 ，不进入 fn2

二、点击，会进入 fn2

若是进入了 fn2 以后

点击，会当即执行完 fn2 函数，跳出 fn2 函数内部

如今，咱们三个按钮都使用过了，还剩

咱们在 fn2 处打多一个一个断点，而后重启

你能看到如今又是停到了第一个断点处

此时，你的小手一按，因而你便跳到了刚打的第二个断点

观察变量值

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

二、或者能够查看左栏调试栏的变量

观察函数调用流程

一样是查看左边的调试栏，中的调用堆栈，能够看到函数调用的顺序

明显能够看到先调用 fn1，在调用 fn2

好的，若是你有跟着作的，相信你已经入门了兄弟，是否是十分钟从入门到精通？？

调试Vue准备

index.html

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

<!DOCTYPE html>
<html lang="en"><head></head><body>
    <div class="a" >
        <testb></testb>
    </div>
    <script src="./vue.js"></script>
    <script src="./vue.test.js"></script>
</body>
</html>复制代码

vue.js

去官网下载生产版本便可

vue.test.js

做用是调用vue，建立一个简单的应用，如今给一个简单的模板

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

如今，你能够尽情去 vue 里面去打断点啦，额..... 虽然如今你还不知道打什么断点，不过不用怕！后面每次讲一块内容，你就能够去本身尝试啦

结尾

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

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

但愿本文会对你有帮助

好的，谢幕了

关注我能够说是至关优秀了