函式式元件原理

前一篇文章分析了函式式元件用法( ，這篇文章從原始碼的角度看看函式式元件，看看它怎麼是無狀態的，以及怎麼沒有例項的。我們就用之前文章的例子來進行分析。

要渲染的元件如下：

list-view-comp 就是函式式元件(在options裡面定義了functional屬性為true)，id和list-data是傳遞給這個元件的props資料。經過模板編譯之後，走到建立元件這個地方，我們就從建立元件開始分析：

function _createelement (
context,
tag,
data,
children,
normalizationtype
) else if ((!data || !data.pre) && isdef(ctor = resolveasset(context.$options, 
'components', tag))) else

傳遞給createcomponent函式的引數tag，data 列印如下：

liubbc comp tag: list-view-comp

liubbc comp data: ]}}

data引數是個object物件，attrs屬性包含傳遞給這個元件的 id, list-data資料。接著我們看createcomponent函式。

function createcomponent (
ctor,
data,
context,
children,
tag) 
//some code
}

加的兩行列印如下：

liubbc createcomponent data is: }

liubbc createcomponent propsdata is: ]}

createcomponent函式對data資料進行了處理，把父元件的動態資料提取出來傳遞給了子元件，完成了父元件向子元件傳遞資料的過程(props down)。data資料中的attrs物件中只剩下id屬性了。

接下來會判斷元件的選項裡面是否定義了functional，如果為true，則createfunctionalcomponent，並直接返回。主角粉墨登場了，我們就一探createfunctionalcomponent究竟。

function createfunctionalcomponent (
ctor,
propsdata,
data,
contextvm,
children
) ;var propoptions = options.props;
if (isdef(propoptions)) 
} else 
if (isdef(data.props)) 
}//new了乙個渲染上下文例項，這個例項裡面有data，props等屬性，以及_c方法(createelement方法)
var rendercontext = new functionalrendercontext(
data,
props,
children,
contextvm,
ctor
);//用call方法，把函式式元件中的render函式中的this設定為null, 這樣render函式就沒有例項了。並
//傳遞了_c方法，以及新new的渲染上下文例項
var vnode = options.render.call(null, rendercontext._c, rendercontext);
//最後生成了vnode
if (vnode instanceof vnode) else if (array.isarray(vnode)) 
return res
}}

我們對關鍵**進行了注釋。最後我們看看functionalrendercontext 建構函式：

function functionalrendercontext (
data,
props,
children,
parent,
ctor
) else 
var iscompiled = istrue(options._compiled);
var neednormalization = !iscompiled;
this.data = data; //對data進行賦值
this.props = props; //對props進行賦值
this.children = children;
this.parent = parent;
this.listeners = data.on || emptyobject;
this.injections = resolveinject(options.inject, parent);
this.slots = function () 
return this$1.$slots
};object.defineproperty(this, 'scopedslots', (
}));
// support for compiled functional template
if (iscompiled) 
if (options._scopeid) 
return vnode
};} else ;
}}

**有錯誤，或不妥之處，歡迎指正。謝謝！如果感覺寫的還可以，對您有幫助也歡迎點讚啊。

函式式元件原理

函式式元件

Vue 函式式元件原理和使用詳解

Vue函式式元件

函式式元件原理

函式式元件

Vue 函式式元件原理和使用詳解

Vue函式式元件

相關推薦