vue原始碼學習筆記1

最近有些無聊，來看看vue的原始碼吧！

首先先找到vuejs的原始碼先，在平時開發的環境裡（node-modules）找到vue的資料夾，然後在dist資料夾裡就可以找到它了。

開啟一看，一萬多行！ 無從下手啊，沒關係。搜尋“function Vue”，在4710行找到了vue的建構函式，

好短啊，怎麼只有這麼點（其他的應該在原型鏈上）。

迎面先來一個if，"development" !== 'production'貌似是打包環境之類的配置相關，這個先跳過。

this instanceof Vue的意思其實看warn也能看出來了，意思就是Vue是一個建構函式需要配合new來使用。

接下來的是_init的函式，查詢一下先，在4576行找到了它。但是它是包含在一個initMixin函式中的，這個函式又是幹嘛用的呢，先在這插個眼，我要先去找找這個initMixin是在什麼地方被呼叫的。

好吧該函式在4719行被自行呼叫的，

傳送回去看_init先，

先建立函式內部變數Vm指向this，然後建立一個內部uid=外部的uid+1，猜測這是一個當前例項的id吧

然後下面又是這個生產環境的問題，跳過。

接下來：

很顯然_insComponent這個屬性一般剛開始是沒有的，先走else，在當前例項建立一個了$options的屬性，出現了一個新函式，先找找在哪定義的。

引數先不管，這個checkComponents函式看了一下大致就是為了檢查物件內的元件是否可以使用（元件名稱格式通過以及不能使用內建元件的名稱），內部還迴圈呼叫了一個validateComponentName的函式

回到mergeOptions，下面接著是normalizeProps，在1361行找到了它，

看下來總結就是檢測options裡的prop是否為物件或者純物件（dom物件等都不算），然後把props裡的物件名稱駝峰化。

再次回到mergeOptions，接下來normalizeInject，因該是類似上面的方法，跳過。再下來是normalizeDirectives 。。也跳過

然後：

    var extendsFrom = child.extends;
    if (extendsFrom) {
        parent = mergeOptions(parent, extendsFrom, vm);
      }
複製程式碼

options裡有extends麼？查了一下是和mixins類似的屬性，mixins又是什麼。。。 （minxins混入物件請自行查詢）

接下來就是對mixins屬性物件的處理了，總的來說這兩個屬性就是會自帶vue的例項物件或者函式，也需要進行淨化內部資料（mergeOptions（））。

然後：

先新建一個options，然後分別迴圈vue建構函式和準備新建例項的options，在這裡面有一個mergeField的函式， 先看第一行：

var strat = strats[key] || defaultStrat;
複製程式碼

這裡要注意的是，strats其實是隻是用來建立一個空物件的小勾子：

在vue的 https://cn.vuejs.org/v2/api/#optionMergeStrategies中寫著，這是一個自定義合併策略的選項。

現在就很明顯了，mergeOptions這個函式是用來淨化例項options各個key的，然後把建構函式裡的各個key和新例項中的各個key進行合併，如果碰到同名屬性，以例項的為準（這個很好理解，css的樣式優先順序也是這樣，範圍越小優先度越高）