Vue源碼解讀系列

--本文采自本人公衆號【猴哥別瞎說】

源碼結構目錄

寫在前面

源碼解讀的vue版本爲：2.6.10。 標註有對應註釋的源碼地址：src.

文章細分章節，各自標題前面的字段含義以下：

[幹] 乾貨，有內容。

[硬] 硬貨，內容較多且不易消化。

文章細分

[幹]構造函數與初始化

[硬]數據響應式

[幹]數組的響應式處理

[幹]異步更新隊列

[硬]虛擬DOM的引入

[硬]patch算法

[硬]組件化機制

如何開啓源碼的閱讀

想要閱讀源碼，可是從 github 上面拉下來代碼以後，殊不知如何下手。我想這是不少人遇到的難題。

以 vue2.6.x 系列爲例，當咱們 git pull 源碼以後，打開文件結構，可能會一臉懵逼。這時候，咱們須要對源碼的基本結構有一個大體的瞭解。

瞭解源碼的基本結構

/vue
    /dist :生成最終文件存放的文件夾
    /example : 官方提供的案例代碼
    /flow : flow類型聲明文件
    /packages : 代碼裏用到的獨立外部包文件
    /scripts : 打包腳本，配置等
    /src : 核心代碼
        /compiler : 編譯器
        /core  : 核心代碼（通用代碼）
        /platforms : 平臺代碼（特殊代碼）
            /web  : 網頁端代碼
            /weex : 移動端代碼
        /server ： 服務端相關
        /sfc : 單文件解釋器
        /shared : 共享邏輯代碼
    /test : 測試文件
複製代碼

這些文件夾的含義，大體能夠經過其名字就能夠知道大體的做用。其中src下面的三個文件夾，將會是源碼閱讀的重點：compiler、core、platforms。

那麼，下一個問題來了，咱們如何去閱讀源碼呢？整個項目的入口在哪裏？

這個時候咱們須要看看 package.json 的指令。查看dev命令：

"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev"
複製代碼

咱們看到了TARGET有一個指向：web-full-dev。其含義應該是web環境下的Dev模式。全局搜索整個關鍵字，發如今/scripts/config.js文件中有這樣的描述：

// runtime-only build (Browser)
  'web-runtime-dev': {
    entry: resolve('web/entry-runtime.js'),
    dest: resolve('dist/vue.runtime.js'),
    format: 'umd',
    env: 'development',
    banner
  }
複製代碼

這個時候，經過解析resolve函數，咱們就能夠發現入口文件在src/platforms/web/entry-runtime-with-compiler.js。

因而，找到入口了。

使用chrome瀏覽器的調試功能

下一步，咱們但願可以在本地可以調試源碼。這個時候，咱們須要作下面的步驟：

1.安裝依賴：npm i

2.安裝rollup : npm i -g rollup

3.修改package.json的dev腳本，添加sourcemap屬性，讓調試時候能夠定位到源碼

"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev"
複製代碼

4.運行開發命令：npm run dev

5.編寫一個最簡單的html文件，引用建立的vue.js文件。

<script src="path/to/dist/vue.js"></script>
複製代碼

6.使用chrome瀏覽器打開該文件。

7.接下來就能夠在瀏覽器愉快地調試代碼了。