vue原始碼解析之選項合併 二

2022-04-03 03:42:24 字數 2186 閱讀 3423

我們跳過mergedata以及mergedataorfn,我們暫且不關注這兩個函式的作用。暫且跳過繼續看下面的**:

strats.data = function

( parentval: any,

childval: any,

vm?: component

): ?function

return

mergedataorfn(parentval, childval)

} return

mergedataorfn(parentval, childval, vm)

}

在strats策略物件上面新增了乙個data策略函式,進行選項data的策略合併

if (childval && typeof childval !== 'function') {}

判斷是否又子元件的data,並且檢測是否是乙個function,如果不是函式則會警告,並且返回parentval

如果childval是函式 則會返回mergedataorfn(parentval, childval) 執行結果

後面就不用說了, 如果又vm 就執行mergedataorfn(parentval, childval, vm)

接下來我們看看一直呼叫的mergedataorfn函式是什麼:

/**

* data

*/export function mergedataorfn (

parentval: any,

childval: any,

vm?: component

): ?function

if (!parentval)

// when parentval & childval are both present,

// we need to return a function that returns the

// merged result of both functions... no need to

// check if parentval is a function here because

// it has to be a function to pass previous merges.

return function mergeddatafn ()

} else else

}}}

整體的也是和之前的幾個函式一樣 首先對vm的判斷,其中就mergedata函式需要介紹下,看下mergedata原始碼,這個函式是用來幹嘛的

/**

* helper that recursively merges two data objects together.

*/function mergedata (to: object, from: ?object): object else if (isplainobject(toval) && isplainobject(fromval))

// 其他情況什麼都不做

} return to

}

接收兩個引數,to,from;

根據呼叫傳參to對應的是childval產生的純物件,from對應parentval產生的純物件

這個函式作用就是:將from物件的屬性混合到to物件中,也可以說是將parentval物件的屬性混合到childval中,最後返回的是處理後的childval物件。

合併階段strats.data將被處理成乙個函式,但是這個函式並沒有被執行,而是到了後面初始化的階段才執行的,

重點:!!!!!!!!!!!

mergedata函式只有在初始化的時候才會執行,進行資料合併;

vue的初始化的時候,injectprops這兩個選項的初始化是先於data選項的,這就保證了我們能夠使用props初始化data中的資料

Vue 原始碼之 nextTick 解析

最近在看 vue 原始碼,一直很好奇這個 nexttick 怎麼實現。本文涉及微任務和巨集任務,不熟悉的可以看我之前的部落格 在瀏覽器環境中,常見的 macro task 有 settimeout messagechannel postmessage setimmediate。而常見的 micro ...

Vue原始碼解析

原始碼位置 src core vdom patch.js updatechildren 作用 key的主要作用是高效的更新虛擬dom,原始碼中在patch的過程中,會執行patchvnode,patchvode過程中會執行updatechildren方法,會更新兩個新舊的子元素,通過key可以準確的...

Vue之Watcher原始碼解析(1)

上一節最後再次呼叫了mount函式,我發現竟然跳到了7000多行的那個函式,之前我還說因為宣告早了被覆蓋,看來我錯了!就是這個函式 line 7531 vue 3.prototype.mount function el,hydrating 第一步query就不用看了,el此時是乙個dom節點,所以直...