Vue Render function Function component

The previously created Anchor header component is relatively simple, does not manage or listens to any state passed to him, and there is no life cycle method, it is just a function that takes parameters

In this example, we mark the component as functional, which means it is stateless (no data), no instances (no this context)

A functional component is like this:

Vue.component (' my-component ', {functional: true,//to compensate for missing instances // Provide a second argument as context render: function (createelement, context) {//...},//Props Optional Props: {//...}})

Note: In versions prior to 2.3.0, if a functional component wanted to accept props, the props option was required, and in 2.3.0 and above, you could omit the props option, and the properties on all components would be automatically resolved to props.

Everything that a component needs is passed through the context, including:

• Props: Provide props object
• Children:vnode an array of child nodes
• Slots:slots Object
• Data: The data object passed to the component
• Parent: A reference to the parents component
• Listeners: (2.3.0+) An object that contains v-on listeners registered on the component. It's just an alias to Data.on.
• Injections: (2.3.0+) If the inject option is used, the object contains the attributes that should be injected

After adding functional:true, a simple update between the render functions of the anchor header component adds the context parameter, this.$ Slots.default is updated to Context.children, and then This.level is updated to Context.props.level.

Because a functional component is just a function, the rendering overhead is much lower. However, the lack of persistent instances also means that functional components do not appear in the Devtools component tree of Vue.

They are also useful when you are packaging components, such as when you need to do this:

• Programmatic selection of one of several components
• Manipulate Children,props,data before passing them on to the child components.

The following is an example of a smart-list component that relies on the value of an incoming props, which can represent more specific components:

var emptylist = {/ * ... */} var tablelist = {/ * ... */} var orderedlist = {/ * ... */} var unorderedlist = {/ * ... */} Vue.component (' Smart-list ', {Functional: true, Render: function (createelement, context) { function appropriatelistcomponent () { var items = Context.props.items if (items.length = = = 0) return emptylist if (typeof items[0] = = = ' object ') return tablelist if (context.props.isOrdered) return orderedlist return unorderedlist}return createelement (Appropriatelistcomponent (), Context.data,context.children)},Props: {items: {type: Array, Required: true },isordered: Boolean }})

Slots () and children contrast

You may wonder why you need slots () and children at the same time. Slots (). Is default not similar to children? In some scenarios, this is true, but what if it is a functional component and the following children?

<my-functional-component> <p slot="foo" > First</p> <p>second</p> </my-functional-component> for this component, children will give you two paragraph labels, and slots (). Default only passes the second anonymous paragraph label, slots (). Foo passes the first named paragraph label. It also has children and slots (), so you can choose to have the component distributed through the slot () system or simply receive it through children, allowing other components to handle it. Template Compilationyou might be interested to know that the Vue template is actually compiled into the render function. This is an implementation detail and usually does not need to be concerned, but if you want to see how the template function is compiled, you will find it very interesting, here is a simple demo that uses Vue.compile to compile the template string in real time:

<div>
<p v-if= "Message" >
{{Message}}
</p>
<p v-else>
No message.
</p>
</div>

Render

function anonymous() {  with(this){return _c(‘div‘,[_m(0),(message)?_c(‘p‘,[_v(_s(message))]):_c(‘p‘,[_v("No message.")])])}}


STATICRENDERFNS:

_m(0): function anonymous() {  with(this){return _c(‘header‘,[_c(‘h1‘,[_v("I‘m a template!")])])}}

Vue Render function Function component