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的樣式優先級也是這樣，範圍越小優先度越高）