之前想要研究下vue的源碼 網上一般直接就上來甩出雙向綁定等等的函數
這次看源碼 想從一個漸進式的方向來解讀。
當前版本基本上是最新的版本,18年6月的最新版,版本號是2.5.17
當我們接觸一個項目或者一個框架 在沒有交接文檔的情況下 首先第一印象是啥? 肯定是目錄
通過查資料和看代碼 基本確定了這些主要目錄的作用和屬性
看到這么多的目錄 以及一大堆的專業術語 肯定是一臉懵逼的進來 一臉懵逼的出去 也就是說平時我們接觸的Vue的實例等等 都是表面最終生成的構造函數或者方法
我們要做的就是透過本質找到內核 當然vue最良心的就是文件的命名 以及方法的命名 core就是這個核心的代碼
廢話不多說 core的核心代碼里最先需要看的是index.js 也就是構造函數的入口文件 別問我怎么知道 我也是查的
內部的包裝已經完畢,沿着路徑尋找到了下一步,到了core層下的index.js
在這一層又掛載和添加了什么東西?
可以看到在這一層又給vue的構造函數掛載了
到這里基本上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構造函數主體部分完成,包括各項初始化,以及發布訂閱模式等等
- initMixin => created周期函數之前的操作,即各項初始化,期間調用 beforeCreate 鈎子
- stateMixin => 利用 definedProperty 進行靜態數據的訂閱發布,並在其中實現幾項實例 api
$set、 $delete、 $watch
, - eventsMixin => 實例事件流的注入, 利用的是訂閱發布模式的事件流構造
- lifecycleMixin => 注入幾個Vue原型函數
renderMixin => 實現實例api $nextTick,后續詳解,實現 _render 渲染虛擬dom- Vue.prototype._update => 調用生命周期鈎子 beforeUpdate,其后實現 virtual dom 的更新;
- Vue.prototype.$forceUpdate => 實現實例 api forceUpdate 強制重新渲染實例,包括其下的子組件(更新了 watcher 隊列);
- Vue.prototype.$destroy => 調用生命周期鈎子 beforeDestroy , 其后移除各項實例子組件,拆卸實例的watcher隊列及調用實例的 __patch__ 方法將 virtual dom 置空(null),最后調用鈎子 destroyed 並解除(實例api:$off)實例所有事件;
2. 在第二階段掛載靜態的屬性和方法
3. 第三階段 添加web平台所需要的配置、組件和指令,以及編譯等。