vue render函式函式元件化

之前建立的錨點標題元件是比較簡單，沒有管理或者監聽任何傳遞給他的狀態，也沒有生命週期方法，它只是乙個接受引數的函式

在這個例子中，我們標記元件為functional，這意味它是無狀態(沒有data),無例項(沒有this上下文)

乙個函式化元件就像這樣：

vue.component('my-component', ,

// props 可選

props:

})注意：在2.3.0之前的版本中，如果乙個函式式元件想要接受props,則props選項是必須的，在2.3.0及以上的版本中，你可以省略props選項，所有元件上的屬性都會被自動解析為props。

元件需要的一切都是通過上下文傳遞的，包括：

在新增functional：true之後，錨點標題元件的render函式之間簡單更新增加context引數，this.$slots.default更新為context.children，之後this.level更新為context.props.level.

因為函式化元件只是乙個函式，所以渲染開銷也低很多。然而，對持久化例項的缺乏也意味著函式化元件不會出現在vue devtools的元件樹里。

在作為包裝元件時它們也非常有用，比如你需要做這些時：

var emptylist =

var tablelist =

var orderedlist =

var unorderedlist =

vue.component('smart-list',

return createelement(

context.data,

context.children)},

props: ,

isordered: boolean}})

slots()和children對比

你可能想知道為什麼同時需要slots()和children。slots().default不是和children類似的嗎？在一些場景中，是這樣，但是如果是函式式元件和下面的這樣的children呢？

first

secondp>

my-functional-component>

對於這個元件，children會給你兩個段落標籤，而slots().default只會傳遞第二個匿名段落標籤，slots().foo會傳遞第乙個具名段落標籤。同時擁有children和slots（），因此你可以選擇讓元件通過slot()系統分發或者簡單的通過children接收，讓其他元件去處理。

模板編譯

你可能有興趣知道，vue的模板實際上是編譯成了render函式。這是乙個實現細節，通常不需要關心，但如果你想看看模板的功能是如何編譯出來的，你會發現非常有趣，下面是乙個使用vue.compile來實時編譯模板字串的簡單demo:

}no message.

render:

function anonymous() 
}
staticrenderfns:

_m(0): function anonymous() 
}

vue render函式 函式元件化