【Vue原理】看Vue源碼，不會調試不行啊

時間 2019-11-08

標籤 Vue原理 vue 源碼不會調試不行简体版

原文原文鏈接

寫文章不容易，點個讚唄兄弟
專一 Vue 源碼分享，文章分爲白話版和源碼版，白話版助於理解工做原理，源碼版助於瞭解內部詳情，讓咱們一塊兒學習吧
研究基於 Vue版本 【2.5.17】

若是你以爲排版難看，請點擊 下面連接 或者拉到下面關注公衆號也能夠吧html

【Vue原理】學會調試Vue源碼vue

調試是程序猿必備的技能，若是你不會調試，你的下場就是.........node

嗯，同樣能夠拿高工資............chrome

不過據我瞭解，連張鑫旭大佬都喜歡使用 console.log 調試，可是你覺得別人不用，你就覺得別人不會嗎，你真的太天真了....json

下面的評論也是...看來同是天涯淪落人瀏覽器

我在項目中也是使用 console.log 調試啊，可是閱讀源碼不同啊，你試試一直用 console.log 調試，搞不死你函數

好了，進入正題....工具

進入VSCode調試界面

是是是，讓咱們把眼睛移動到 VSCODE 左邊活動欄這邊學習

一、有個小蟲，點擊進入調試界面this

二、或者按快捷鍵， 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 裏面去打斷點啦，額..... 雖然如今你還不知道打什麼斷點，不過不用怕！後面每次講一塊內容，你就能夠去本身嘗試啦