[Vue] use and detailed explanation of render function

foreword

In normal programming, most of them create html through templates. However, in some special cases, when using the template method, the requirements cannot be well met. At this time, the programming ability of JavaScript is required to operate. At this point, it's time for the render function to show its fists.

The role of render

In this example on the official website, using components, put the same content into h1-h6 tags through solt. When using the traditional method, the code is not only lengthy, but also written repeatedly in the title of each level. When you want to insert Repeat again when anchoring the element. After using the render function, the code is much simplified.

Vue.component('anchored-heading', {
    
    
  render: function (createElement) {
    
    
    return createElement(
      'h' + this.level,   // 标签名称
      this.$slots.default // 子节点数组
    )
  },
  props: {
    
    
    level: {
    
    
      type: Number,
      required: true
    }
  }
})

The function of the render function is that when the template is implemented in the scene, the code is tedious and cumbersome and there are a lot of repetitions. At this time, using it can greatly simplify the code.

Render function explanation

In using the render function, a parameter createElement will be used, and this createElement parameter, in essence, is also a function, which is a tool used to build virtual dom in vue. Let's take a look around this createElement.

In the createelement method, there are three parameters:

return createEement(, {
    
    }, [])

1. The first parameter (required parameter): mainly used to provide html content in dom, the type can be string, object or function.
2. The second parameter (object type, optional): it is used to set some styles, attributes, parameters of passed components, binding events, etc. in this dom.
3. The third parameter (the type is an array, and the array element type is VNode, optional): it is mainly used to set the distribution content, such as other new components.

Note: All vnodes in the component tree must be unique
Create a virtual node by passing in the createElement parameter, and then return the node to render.

In general, the essence of the render function is to create a virtual node.

The difference between render and template

Similarities:
The render function is the same as the template to create an html template

the difference:

• Template is suitable for simple logic, and render is suitable for complex logic.
• The user template is relatively easy to understand, but not flexible enough; the custom render function is highly flexible, but has high requirements for the user.
• The performance of render is high, and the performance of template is low.
• There is no compilation process for rendering with the render function, which is equivalent to the user directly sending the code to the program. Therefore, using it requires high requirements for users and is prone to errors
• The priority of the Render function is higher than that of the template, but it should be noted that the Mustache (double curly braces) syntax cannot be used again

Note: template and render cannot be used together, otherwise it will be invalid

render example

For example, encapsulating a set of common button components at one time, the button has four styles (success, error, warning, default).

The template method is as follows:

 <div class="btn btn-success" v-if="type === 'success'">{
    
    {
    
     text }}</div>
 <div class="btn btn-danger" v-else-if="type === 'danger'">{
    
    {
    
     text }}</div>
 <div class="btn btn-warning" v-else-if="type === 'warning'">{
    
    {
    
     text }}</div>

There is no problem in writing in this way when there are few buttons, but once the number of buttons increases, writing in this way will be particularly lengthy. At this time, the render function is needed.

Generate button DOM according to the situation

Before using the render function, you need to remove the template tag and keep only the logic layer.

Fill in the class dynamically through the type passed in, and add the content to the DOM through inderText.

render(h) {
    
    
  return h('div', {
    
    
   class: {
    
    
    btn: true,
    'btn-success': this.type === 'success',
    'btn-danger': this.type === 'danger',
    'btn-warning': this.type === 'warning'
   },
   domProps: {
    
    
    innerText: this.text
   },
   on: {
    
    
    click: this.handleClick
   }
  });
 },