vue源碼閱讀（一）

以前想要研究下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構造函數主體部分完成，包括各項初始化，以及發佈訂閱模式等等

• 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平臺所須要的配置、組件和指令，以及編譯等。