Usage scenarios and source code analysis of Vue advanced components functional components

introduce

Vue provides a functional component that can make components stateless and instance-free. In principle, most subcomponents will go through the instantiation process, but pure function components do not have this process. It can be simply understood as an intermediate layer that only processes data and does not create instances. It is also due to this behavior that its rendering overhead will be much lower. The actual application scenario is that when we need to choose one of multiple components to render on our behalf, or to process data such as children, props, and data before passing them to child components, we can use functional components to complete this, which is essentially an external packaging of the component.

Usage scenarios

Define two component objects, test1, test2

var test1 = {
props: ['msg'],
render: function (createElement, context) {
  return createElement('h1', this.msg)
}
}
var test2 = {
props: ['msg'],
render: function (createElement, context) {
  return createElement('h2', this.msg)
}
}

Define a functional component that selects one of the components for selection based on the calculation result

Vue.component('test3', {
// The functional component's flag functional is set to true
functional: true,
props: ['msg'],
render: function (createElement, context) {
  var get = function() {
    return test1
  }
  return createElement(get(), context)
}
})

Use of functional components

<test3 :msg="msg" id="test">
</test3>
new Vue({
el: '#app',
data: {
  msg: 'test'
}
})

The final rendered result is:

<h2>test</h2>

Source code analysis

Functional components set the functional property to true in the component object definition. This property is the key to distinguishing ordinary components from functional components. Similarly, when encountering a subcomponent placeholder, createComponent will be entered to create the subcomponent Vnode. Due to the existence of the functional property, the code will enter the functional component branch and return the result of the createFunctionalComponent call. Note that after executing createFunctionalComponent, the subsequent logic of creating child Vnodes will not be executed. This is also the reason why there will be no child Vnodes to instantiate child components in the process of creating real nodes. (No examples)

function createComponent(){
  ···
  if (isTrue(Ctor.options.functional)) {
    return createFunctionalComponent(Ctor, propsData, data, context, children)
  }
}

The createFunctionalComponent method detects and merges the incoming data, instantiates the FunctionalRenderContext, and finally calls the functional component's custom render method to perform the rendering process.

function createFunctionalComponent(
  Ctor, // Functional component constructor propsData, // props passed into the component
  data, // attr attribute passed in by the placeholder component context, // vue instance children// child node){
  //Data detection and merging var options = Ctor.options;
  var props = {};
  var propOptions = options.props;
  if (isDef(propOptions)) {
    for (var key in propOptions) {
      props[key] = validateProp(key, propOptions, propsData || emptyObject);
    }
  } else {
    //Merge attrs
    if (isDef(data.attrs)) { mergeProps(props, data.attrs); }
    // Merge props
    if (isDef(data.props)) { mergeProps(props, data.props); }
  }
  var renderContext = new FunctionalRenderContext(data,props,children,contextVm,Ctor);
  // Call the custom render function in the functional component var vnode = options.render.call(null, renderContext._c, renderContext)
}

The ultimate purpose of the FunctionalRenderContext class is to define a render method that is different from the actual component rendering.

function FunctionalRenderContext() {
  //Omit other logic this._c = function (a, b, c, d) { return createElement(contextVm, a, b, c, d, needNormalization); };
}

During the execution of the render function, the createElement method will be recursively called. At this time, the component is already a real component and starts to execute the normal component mounting process.

Question: Why do functional components need to define a different createElement method? - The only difference between the functional component createElement and the previous ones is the last parameter. As mentioned in the previous chapter, createElement will decide whether to flatten the child Vnode based on the last parameter. In general, the compiled results of children are of Vnode type. Only the functional component is special. It can return an array. In this case, flattening is necessary. Let’s look at the following example:

Vue.component('test', {  
  functional: true,  
  render: function (createElement, context) {  
    return context.slots().default  
  }  
}) 

<test> 
     <p>slot1</p> 
     <p>slot</p> 
</test>

At this time, the render function of the functional component test returns the Vnode of two slots, which exists in the form of an array. This is the scene that needs to be flattened.

To briefly summarize the functional components, we can see from the source code that functional components do not have the process of instantiating components like ordinary components, so there are no processes including component life cycle and component data management. It only receives the data passed to the component intact for processing and renders the required content. Therefore, as a pure function, the rendering overhead can be greatly reduced.

Summarize

This concludes this article about the usage scenarios and source code analysis of Vue advanced components and functional components. For more relevant content about Vue advanced components and functional components, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!