vue2源碼解析入門 (vue 2.6.14) (一)


 Vue 的初始化過程:
執行編譯,生成  render 函數。
一系列的初始化,數據響應式化,觸發對應的生命周期鈎子。
執行掛載的邏輯,先生成虛擬 DOM,再生成真實 DOM,更新的邏輯也是這樣,只不過多出了對比虛擬 DOM 的一個步驟

一、我們到 vue倉庫 下載 Vue2.6.14 的源碼。

https://github.com/vuejs/
先來看一下整體目錄結構

 

 

 

二、首先通過 package.json 中的打包命令,我們可以找到完整版的 Vue 的入口文件。

在該文件中,看到vue用的是的rollup編輯的

rollup -w - c
--wacth | -w 開啟文件監視 // 它檢測到磁盤上單個模塊已經改變,它會重新構建你的文件束

--config | -c 指定配置文件地址

(1)package.json

 (2)scripts/config.js

找到config.js文件,路徑為scripts/config.js

需要拿到 --environment傳入的環境變量,根據配置TARGET的配置選擇 web-full-dev的配置

 

找到resole的封裝找到對應的路徑配置alias.js

(3)scripts/alias.js

 

(4)src/platforms/web/entry-runtime-with-compiler.js 

所以我們先來到 src/platforms/web/entry-runtime-with-compiler.js 文件

通過一層一層的分析,終於快要到vue的核心代碼了

簡單來看下,這個文件主要是擴展了 Vue.prototype.$mount 方法

 

根據源碼,我們還可以得到一個小知識,就是如果 Vue 的 options 中同時傳入 el, render, template,哪個優先級最高?

通過下面這段代碼,我們可以發現,render 的優先級是最高的,因為如果是 render,則直接走到最下面的 mount 了,其次是 template,然后再是 el

 

 在src/platforms/web/entry-runtime-with-compiler.js 這個文件中看到引入的vue

 

 也就是這個文件src/platforms/web/runtime/index.js 文件

(5)src/platforms/web/runtime/index.js

這里有 2 個比較重要的方法

 

 可以看到,原始的 $mount 是在這里被賦值的,不過我們還沒找到初始的 Vue 類,所以我們繼續進入 src/core/index.js

 

 

 

 

 (6) src/core/index.js

 

 initGlobalAPI 定義了一些全局 API,比如 setuse 之類的,我們繼續看 instance/index 中的代碼。

三、原始的 Vue 

(7) src/core/instance/index.js

在這里,終於找到原始的 Vue 了

構造函數定義了一個Vue

 new Vue 的入口就是這里。

它調用了 _init 方法,而 _init 方法是 initMixin 混入進來的。

 

 找到initMixin

(8) src/core/instance/init.js

在這里,可以看到Vue 的初始化過程

 

 看一下源碼中的 initState

 (9)src/core/instance/state.js

可以看到數據響應式的做法,初始化處理 data 的函數 initData()

這個 initData方法調用了proxy 和 observe

 (10)src/core/observer/index.js

來看看observe

 

 

 在構造函數中,發現每個被處理過的對象,都會掛上 _ob_ 這個 key,代表着 Observer 實例,

另外 this.dep = new Dep() 這個代碼要關注下,即每個 Observer 有一個獨有的 dep 依賴。

 

(11)  src/core/instance/lifecycle.js

  Watcher

每個組件只有一個 Watcher,當然用戶也可能通過 watch 創建額外的。這里我們也可以看到組件的掛載過程,先調用 render 函數,那 render 生成虛擬 DOM,然后交給 _update 函數。

 

看下 _update 函數的邏輯,可以看到就是使用 _patch_ 來對比前后虛擬 DOM,然后生成真實 DOM,再進行渲染,patch 也就是我們常說的 diff

 

 

 (12)  src/core/observer/watcher.js

從構造函數中可以發現 this.get 方法的調用,pushTarget 用來設置 Dep.targetthis.getter 則是調用了傳進來的更新函數

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM