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

vue 提供了一種稱為函式式元件的元件型別，用來定義那些沒有響應資料，也不需要有任何生命週期的場景，它只接受一些props 來顯示元件。

一：使用方法

vue.
component
('my-component',,
// 為了彌補缺少的例項
// 提供第二個引數作為上下文
render:
function
(createelement, context)
})

或者單檔案定義函式式元件（2.5版本後）


class
="btn btn-primary"
v-bind=
"data.attrs"
v-on=
"listeners"
>
>
<
/button>
<
/template>

二：引數

functional

設定為true 即表示該元件為乙個函式元件

props（可選）

傳遞值到元件內部，2.3.0版本後可以省略，框架會自動將元件上的特性解析為prop

render函式

提供渲染函式來返回乙個vnode

三：和正常自定義元件的區別？

不維護響應資料

無鉤子函式

沒有instance例項

所以在元件內部沒有辦法像傳統元件一樣通過this來訪問元件屬性

實現原理見下面**中的中文注釋

function
createcomponent
( ctor,
data,
context,
children,
tag)var basector = context.$options._base;
// 省略n行
// functional componentif(
istrue
(ctor.options.functional)
)// 省略n行
// install component management hooks onto the placeholder node
installcomponenthooks
(data)
;// 正常的元件是在此進行初始化方法（包括響應資料和鉤子函式的執行）
// return a placeholder vnode
var name = ctor.options.name || tag;
var vnode =
newvnode((
"vue-component-"
+(ctor.cid)
+(name ?
("-"
+ name):''
)), data, undefined, undefined, undefined, context,
, asyncfactory
);return vnode
}

正是因為函式式元件精簡了很多例如響應式和鉤子函式的處理，因此渲染效能會有一定的提高，所以如果你的業務元件是乙個純展示且不需要有響應式資料狀態的處理的，那函式式元件會是乙個非常好的選擇。

四：render函式

render函式是函式式元件最重要的引數，且是必須的。

render函式有兩個引數，乙個是createelement，乙個是context

createelement是建立虛擬dom的函式

context是函式式元件的上下文，它包括：

props：提供所有 prop 的物件 children: vnode 子節點的陣列 slots: 乙個函式，返回了包含所有插槽的物件 scopedslots: (2.6.0+ ) 乙個暴露傳入的作用域插槽的物件。也以函式形式暴露普通插槽。 data：傳遞給元件的整個資料物件，作為 createelement 的第二個引數傳入元件 parent：對父元件的引用 listeners: (2.3.0+ ) 乙個包含了所有父元件為當前元件註冊的事件***的物件。這是 data.on 的乙個別名。 injections: (2.3.0+

) 如果使用了 inject 選項，則該物件包含了應當被注入的屬性。

由於函式式元件沒有建立元件例項，所有傳統的通過this來呼叫的屬性，在這裡都需要通過context來呼叫。例如：

vue.
component
('my-functional-button',}
)

context 上下文的原始碼：

function
functionalrendercontext
( data,
props,
children,
parent,
ctor
)else
var iscompiled =
istrue
(options._compiled)
;var neednormalization =
!iscompiled;
this
.data = data;
this
.props = props;
this
.children = children;
this
.parent = parent;
this
.listeners = data.on || emptyobject;
// data.on的別名
this
.injections =
resolveinject
(options.inject, parent)
;this
.slots
=function()
return
this$1.$slots
}; object.
defineproperty
(this
,'scopedslots',(
}));
// ****
}

五：context中的 slots(）和children

slots 返回的是map化的非作用域插槽，key是slot的名字，value是slot的內容，所有我們可以通過slots().default 來呼叫指定的插槽。

children 是乙個陣列，包含了所有的非作用域插槽。所以我們可以很簡單的把所有插槽傳遞給下乙個函式進行處理。

六：context中的scopedslots使用演示


"scope"
>demo functional component 
}<
/div>
<
/func-comp>

vue.
component
('func-comp',,
render
(createelement, context))]
)}})

顯示結果：demo functional component 1

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

Vue函式式元件

函式式元件原理

詳解Vue響應式原理

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

Vue函式式元件

函式式元件原理

詳解Vue響應式原理

相關推薦