vue原始碼閱讀(一)

2021-09-29 23:00:04 字數 1958 閱讀 4663

之前想要研究下vue的原始碼 網上一般直接就上來甩出雙向繫結等等的函式

這次看原始碼 想從乙個漸進式的方向來解讀。

當前版本基本上是最新的版本,18年6月的最新版,版本號是2.5.17

當我們接觸乙個專案或者乙個框架  在沒有交接文件的情況下 首先第一印象是啥? 肯定是目錄

通過查資料和看** 基本確定了這些主要目錄的作用和屬性

看到這麼多的目錄 以及一大堆的專業術語 肯定是一臉懵逼的進來 一臉懵逼的出去  也就是說平時我們接觸的vue的例項等等 都是表面最終生成的建構函式或者方法

我們要做的就是透過本質找到核心 當然vue最良心的就是檔案的命名  以及方法的命名 core就是這個核心的**

廢話不多說 core的核心**裡最先需要看的是index.js 也就是建構函式的入口檔案 別問我怎麼知道 我也是查的

內部的包裝已經完畢,沿著路徑尋找到了下一步,到了core層下的index.js 

在這一層又掛載和新增了什麼東西?

可以看到在這一層又給vue的建構函式掛載了

initglobalapi 和 isserverrendering 以及版本資訊, 我們先不去扣這一系列的掛載都起了什麼作用,先走完這整體流程。(當然命名的檔名基本上就是所掛載的東西、很直觀)

當然,最主要的還是整體,避免一葉障目。

到這裡基本上vue上該掛載的都掛載上了,那麼下一步的話就到了platforms這裡,也就是平台劃分,在之前的vue原始碼的版本(2.1版本),到了這一層直接會跳到web-runtime.js這一層,

安裝不同平台特有的方法,但是在這個新的版本中,我們看有了很好的改進,單獨platforms這個檔案來處理,而且整體的劃分了web端以及weex端。

首先,入口檔案在外層的entry-runtime

接下來 又幹了啥? 以為web端為例

1. 覆蓋vue.config屬性 替換為平台特有的屬性和方法

2. extend 安裝相應的指令和元件

3. vue.prototype 上定義_patch_ 以及$mount

4. 關於vue devtools的一些設定

接下來就到了最後乙個處理vue的地方 entry-runtime-with-compiler

最後一階段主要是重寫掛載以及新增編譯器,也就是將模板template編譯為render函式 

到這裡vue的建構函式才算是真正的新鮮出爐。

總結一下: 

1. 在第一階段,整體注入了五個部分,vue建構函式主體部分完成,包括各項初始化,以及發布訂閱模式等等

2. 在第二階段掛載靜態的屬性和方法

3. 第三階段 新增web平台所需要的配置、元件和指令,以及編譯等。

vue原始碼閱讀(二)

那麼下邊這個則是例項化建構函式,也就是開始使用了,不管是作為框架,還是作為外掛程式,都需要new一下。翻篇回去,先看vue的建構函式,this.init options 是呼叫的第乙個方法,包括傳進來的引數options,不過在這之前,還判斷了下呼叫vue的是不是先new出來的。根據注入的檔案 找到...

《原始碼閱讀》原始碼閱讀技巧,原始碼閱讀工具

檢視某個類的完整繼承關係 選中類的名稱,然後按f4 quick type hierarchy quick type hierarchy可以顯示出類的繼承結構,包括它的父類和子類 supertype hierarchy supertype hierarchy可以顯示出類的繼承和實現結構,包括它的父類和...

Vue 原始碼閱讀(七) bind

class demo resize init new demo 執行後,縮放瀏覽器,此時彈窗顯示undefined。符合預期!import vue from vue new vue methods mounted 縮放瀏覽器,此時彈框顯示1。不符合預期!按常理,繫結事件this.resize後,將會...