這一節我們來看下merge相關的邏輯,我們首先從init入口說起在core/instance/init.js裡面有

當執行new vue 時候, option._iscomponent為false,走到else執行mergeoptions的操作,

resolveConstructorOptions的參數是ctor這裡實際傳入是的事Vue,它的super屬性是空,所以初始化時候直接return options

我們接下來看下mergeOptions的實現,他的實現是在core/instance/util/options中

我們看一下這塊,判斷參數child是否有extends,如果有就遞歸調用mergeOptions

上面這段邏輯是真正的合併選項,首先定義一個options是要返回的對象,遍歷父集上的key調用mergeField,接下來遍歷子集的key,如果子集上的key沒有在父集上接下來繼續調用mergeFiled.

這個mergeFileld就是根據key的不同拿到不同的strats函數,strats實際上就是定義的不同的合併策略,這個starats的原始定義是如下

這個optionmerge..用戶是可以自定義修改的,在源碼上的合併策略有對data watch compute合併策略,

在mergeHook這段代碼中,返回的是個數組,判斷子有沒有定義,如果有定義看看父有沒有定義,如果有父,但沒有定義返回一個數組。

接下來我們分析一下實例化子組件的merge過程


推薦閱讀:
相关文章