VUE render function usage and detailed explanation

Preface

In normal programming, most of the time, HTML is created through templates. However, in some special cases, the template method cannot meet the needs well. At this time, JavaScript programming skills are needed to operate. At this point, it's time for the render function to show its strength.

The role of render

Official website example entry

In this example on the official website, components are used to put the same content into h1-h6 tags through solt. When using the traditional method, the code is not only lengthy, but also <slot></slot> is repeatedly written in each level of the title, and it needs to be repeated again when the anchor element is to be inserted. After using the render function, the code is much simpler.

Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level, // tag name this.$slots.default // child node array)
  },
  props: {
    level:
      type: Number,
      required: true
    }
  }
})

The role of the render function is to greatly simplify the code when the code implemented by template in the scene is lengthy, cumbersome and has a lot of repetition.

Render function explanation

When using the render function, a parameter createElement is used. This createElement parameter is essentially also a function, which is the tool used to build the virtual DOM in Vue. Let's take a look at createElement.

In the createelement method, there are three parameters:

return createEement(, {}, [])

1. The first parameter (required parameter): is mainly used to provide HTML content in DOM. The type can be string, object or function.

2. The second parameter (object type, optional): used to set some styles, attributes, parameters of the passed components, binding events, etc. in this DOM.

3. The third parameter (type is array, array element type is VNode, optional): mainly used to set the distribution content, such as other newly added components.

Note: All vnodes in the component tree must be unique

By passing in the createElement parameter, a virtual node is created, and then the node is returned 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, like template , creates an HTML template

Differences:

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

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

Rendering Example

For example, if you encapsulate a set of common button components at one time, the buttons have four styles (success, error, warning, and 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>

This is fine when there are few buttons, but once the number of buttons increases, it will become very lengthy. At this time, a render function is needed.

Generate button DOM according to the situation

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

The class is dynamically filled in through the passed type, and the content is added 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
   }
  });
 },

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!