vue源碼閱讀（二）

一 一個實例

    若是簡單瞭解過些Vue的API的話，確定會對一下這個特別熟悉，在上一篇裏，分析了Vue的核心文件core的index.js構造vue函數執行的流程。

    那麼下邊這個則是實例化構造函數，也就是開始使用了，無論是做爲框架，仍是做爲插件，都須要new一下。

    

    千呼萬喚，咱們把它請出來以後，發現點不一樣的東西，router、filter、store暫時先不表，可是這個#app是個啥東西？

    翻篇回去，先看Vue的構造函數，this._init(options)是調用的第一個方法，包括傳進來的參數options，不過在這以前，還判斷了下調用Vue的是否是先new出來的。

    

   

二 從init方法到Vue初始化作的第一件事

    根據注入的文件 找到了 init方法的文件，它是在core/instance/init.js

    完整的方法以下

    

    一開始是定義了兩個屬性 _uid 和_isVue 

    其中_uid是當前實例的惟一id，並且是遞增的實例id 保證不會重複，通常會自動分配，不建議操做，固然若是須要操做的話，能夠手動分配

    _isVue設置爲true，避免監聽對象時自身被監聽

    而後是判斷是否認義_isComponent()，這裏查了下注釋和代碼，is_Component = true是指內部的組件實例，而initInternalCompoent()函數是做者對組件內部實例化的優化，

    通常咱們寫的代碼都會走else的分支，也就是mergeOptions() 這個方法。

   

    接下來就遇到了第一個比較重要的點，理解mergeOptions這個方法，他定義在工具類的options這個js文件夾下。

    首先想到的是爲何要進行策略對象的合併，並且是init的第一步，簡單的說，Vue在處理選項的時候，使用了這個策略對象把父子選項進行合併，並將最終的值賦值給實例下

    的$options，更直白的說就是把vue實例上原有的屬性和傳入的option以及繼承和構造的全部屬性進行遞歸式的合併，確保一個vue實例是有一個$options.

    先說下這個options,當咱們new一個vue的實例時，能夠傳一些數據，好比上面new的函數那樣，從前邊看，vue的實例在實例化後會加載不少其餘的東西，例如生命週期鉤子、render函數等等。

    而手動傳入的這個對象，就叫作options，也是上面vm.$options中傳入的第二個參數，關於vm.$options，是一個貫穿整個源碼的屬性，能夠單獨拆出來說，可是爲了文章的完整性，先簡單說一下，否則後邊的這個合併策略對象就會雲裏霧裏。

 

   這是mergeOptions()執行的流程

   

   

    這函數涉及到了不少複雜的合併策略，包括鉤子函數、props、methods、inject\computed、directives、filter、data,爲了輕鬆的走完整個流程，這裏不展開

    更具體的流程以下：

    

 

三 一個嵌套的三元表達式

    看這些複雜的合併代碼有點腦袋疼，做者還特別秀的寫了個嵌套的三元表達式，他長這樣。

    

    

四 

 

    總結一下Vue的初始化：Vue的初始化主要就幹了這麼幾件事：合併配置、初始化生命週期、初始化事件和渲染邏輯、初始化data作數據劫持，這種把不一樣的功能和邏輯部分

拆分紅一個個單獨的模塊，使得Vue的核心加載過程一目瞭然，這種編程思想是十分值得借鑑的。