Vue Render is directly rendered into a DOM tree without compilation. Rendering is more efficient and logical.

Vue Render is used in two cases

  1. Create the component directly with Render in the component, which can be used in conjunction with template

The component created with Render has all the method properties of the Template component

components:{
        NodeContent: {
           props: {
            level: {
              type: Array}},render(h) {
            if (this.level.length) {
              return h('div'.this.level.map(function (item) {
                return h('p', item)
              }))
            }else{
              return h('p'.'Passed array length 0')}}}},<node-content :level='level'></node-content>// apply directly to template
Copy the code
  1. Use Render directly to generate a single file view

Generate the view directly, you can bind the class ID and style.

export default {
        name: "two".render: function (h) {
            return h('div', 
                {
                    class: ['two'],
                },['111'.this.$store.state.datamag.sex]
            )
        },
    }
Copy the code

Use more teaching on the official website