Rendering Function & JSX Details

1. Basics

Vue recommends using templates to create your HTML in most cases. However, in some scenarios, you really need the full programming power of JavaScript. At this time we can use the rendering function, which is closer to the compiler than the template

Let's dive into a simple example where the render function is useful. Suppose we want to generate some headings with anchors:

<h1>
  <a name="hello-world" href="#hello-world" rel="external nofollow" >
    Hello world!
  </a>
</h1>

For the HTML above, we decided to define the component interface like this:

<anchored-heading :level="1">Hello world!</anchored-heading>

When you start writing a component that can only dynamically generate a heading through level prop , you might quickly think of implementing it like this:

<script type="text/x-template" id="anchored-heading-template">
  <h1 v-if="level === 1">
    <slot></slot>
  </h1>
  <h2 v-else-if="level === 2">
    <slot></slot>
  </h2>
  <h3 v-else-if="level === 3">
    <slot></slot>
  </h3>
  <h4 v-else-if="level === 4">
    <slot></slot>
  </h4>
  <h5 v-else-if="level === 5">
    <slot></slot>
  </h5>
  <h6 v-else-if="level === 6">
    <slot></slot>
  </h6>
</script>

Vue.component('anchored-heading', {
  template: '#anchored-heading-template',
  props: {
    level:
      type: Number,
      required: true
    }
  }
})

Using a template here is not the best choice: not only is the code lengthy, but <slot></slot>， and it has to be repeated again when the anchor element is inserted.

While templates work great in most components, they are clearly not appropriate here. So, let's try to rewrite the above example using the render function:

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
    }
  }
})

Looks a lot simpler! This simplifies the code a lot, but requires you to be very familiar with Vue's instance property . In this example, you need to know that when you pass child nodes without the v-slot directive to a component, such as Hello world ! in anchored-heading , these child nodes are stored in $slots.default in the component instance. If you haven't already, I recommend reading about the instance property API before diving into render functions.

2. Nodes, trees, and virtual DOM

Before diving into render functions, it's important to understand a little bit about how browsers work. Take the following HTML as an example:

<div>
  <h1>My title</h1>
  Some text content
  <!-- TODO: Add tagline -->
</div>

When the browser reads this code, it builds a tree of "DOM nodes" to keep track of everything, just like you would draw a family tree to track the progression of family members.

The DOM node tree corresponding to the above HTML is shown below:

Each element is a node. Each paragraph of text is also a node. Even comments are nodes. A node is a section of a page. Just like a family tree, each node can have children (that is, each part can contain other parts).

Updating all of these nodes efficiently can be difficult, but fortunately you don't have to do it manually. You just need to tell Vue what you want the HTML on the page to be, which can be in a template:

<h1>{{ blogTitle }}</h1>

Or in a render function:

render: function (createElement) {
  return createElement('h1', this.blogTitle)
}

In both cases, Vue will automatically keep the page updated even if blogTitle changes.

1. Virtual DOM

Vue creates a virtual DOM to track how it changes the real DOM. Please look carefully at this line of code:

return createElement('h1', this.blogTitle)

What exactly does createElement return? Not actually an actual DOM element. A more accurate name might be createNodeDescription , because the information it contains tells Vue what kind of node needs to be rendered on the page, including description information of its child nodes. We describe such nodes as "virtual nodes", which are often abbreviated as "VNode". "Virtual DOM" is what we call the entire VNode tree built by the Vue component tree.

3. createElement parameters

The next thing you need to be familiar with is how to use those functions in the template in the createElement function. Here are the parameters that createElement accepts:

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // An HTML tag name, component options object, or // an async function that resolves to any of the above. Required field.
  'div',

  // {Object}
  // A data object corresponding to the attribute in the template. Optional.
  {
    // (see next section for details)
  },

  // {String | Array}
  // Child virtual nodes (VNodes), constructed by `createElement()`,
  // You can also use strings to generate "text virtual nodes". Optional.
  [
    'Write some text first',
    createElement('h1', 'A headline'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

1. Dive into data objects

One thing to note: just as v-bind:class and v-bind:style are treated specially in the template syntax, they also have corresponding top-level fields in the VNode data object. This object also allows you to bind normal HTML attribute , as well as DOM property such as innerHTML (which overrides the v-html directive).

{
  // Same API as `v-bind:class`,
  // Accepts a string, object, or an array of strings and objects 'class': {
    foo: true,
    bar: false
  },
  // Same API as `v-bind:style`,
  // Accepts a string, object, or array of objects style: {
    color: 'red',
    fontSize: '14px'
  },
  // Normal HTML attribute
  attrs: {
    id: 'foo'
  },
  // Component prop
  props: {
    myProp: 'bar'
  },
  // DOM properties
  domProps: {
    innerHTML: 'baz'
  },
  // Event listener is inside `on`,
  // But modifiers like `v-on:keyup.enter` are no longer supported.
  // Need to manually check keyCode in the processing function.
  on: {
    click: this.clickHandler
  },
  // Only used for components to listen to native events, not events triggered by // `vm.$emit` inside components.
  nativeOn: {
    click: this.nativeClickHandler
  },
  // Custom directives. Note that you cannot use `oldValue` in `binding`
  // Assignment, because Vue has automatically synchronized it for you.
  directives: [
    {
      name: 'my-custom-directive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers:
        bar: true
      }
    }
  ],
  // The format of a scoped slot is // { name: props => VNode | Array<VNode> }
  scopedSlots: {
    default: props => createElement('span', props.text)
  },
  // If the component is a subcomponent of another component, you need to specify a name for the slot slot: 'name-of-slot',
  // Other special top-level properties
  key: 'myKey',
  ref: 'myRef',
  // If you apply the same ref name to multiple elements in the rendering function,
  // Then `$refs.myRef` will become an array.
  refInFor: true
}

2. Complete Example

With this knowledge, we can now complete the component we wanted to implement in the first place:

var getChildrenTextContent = function (children) {
  return children.map(function (node) {
    return node.children
      ? getChildrenTextContent(node.children)
      : node.text
  }).join('')
}

Vue.component('anchored-heading', {
  render: function (createElement) {
    // Create a kebab-case ID
    var headingId = getChildrenTextContent(this.$slots.default)
      .toLowerCase()
      .replace(/\W+/g, '-')
      .replace(/(^-|-$)/g, '')

    return createElement(
      'h' + this.level,
      [
        createElement('a', {
          attrs: {
            name: headingId,
            href: '#' + headingId
          }
        }, this.$slots.default)
      ]
    )
  },
  props: {
    level:
      type: Number,
      required: true
    }
  }
})

3. Constraints

VNode must be unique

All VNodes in a component tree must be unique. This means that the following render function is illegal:

render: function (createElement) {
  var myParagraphVNode = createElement('p', 'hi')
  return createElement('div', [
    // Error - Duplicate VNode
    myParagraphVNode, myParagraphVNode
  ])
}

If you really need to repeat an element/component a lot of times, you can use a factory function to do it. For example, the following render function renders 20 identical paragraphs in a perfectly legal way:

render: function (createElement) {
  return createElement('div',
    Array.apply(null, { length: 20 }).map(function () {
      return createElement('p', 'hi')
    })
  )
}

4. Use JavaScript to replace template functions

1. v-if and v-for

As long as something can be done easily in native JavaScript, Vue's render functions don't provide proprietary alternatives. For example, v-if and v-for used in templates:

<ul v-if="items.length">
  <li v-for="item in items">{{ item.name }}</li>
</ul>
<p v-else>No items found.</p>

These can all be rewritten in the render function using JavaScript if/ else and map:

props: ['items'],
render: function (createElement) {
  if (this.items.length) {
    return createElement('ul', this.items.map(function (item) {
      return createElement('li', item.name)
    }))
  } else {
    return createElement('p', 'No items found.')
  }
}

2. v-model

There is no direct counterpart to v-model in the render function - you have to implement the corresponding logic yourself:

props: ['value'],
render: function (createElement) {
  var self = this
  return createElement('input', {
    domProps: {
      value: self.value
    },
    on: {
      input: function (event) {
        self.$emit('input', event.target.value)
      }
    }
  })
}

That’s the price of going low-level, but it gives you much finer control over the details of the interaction than v-model.

3. Events & Key Modifiers

For event modifiers such as .passive , .capture , and .once , Vue provides corresponding prefixes that can be used for on:

For example:

on: {
  '!click': this.doThisInCapturingMode,
  '~keyup': this.doThisOnce,
  '~!mouseover': this.doThisOnceInCapturingMode
}

For all other modifiers, the private prefix is ​​not necessary, since you can use the event method from within the event handler:

Here is an example using all modifiers:

on: {
  keyup: function (event) {
    // If the element that triggers the event is not the element to which the event is bound // then return if (event.target !== event.currentTarget) return
    // If the enter key was not pressed or // the shift key was not pressed at the same time // then return if (!event.shiftKey || event.keyCode !== 13) return
    // Stop event bubbling event.stopPropagation()
    // Prevent the element's default keyup event event.preventDefault()
    // ...
  }
}

4. Slots

You can access the contents of static slots via this.$slots , where each slot is an array of VNodes:

render: function (createElement) {
  // `<div><slot></slot></div>`
  return createElement('div', this.$slots.default)
}

You can also access scoped slots through this.$scopedSlots , each scoped slot is a function that returns a number of VNodes:

props: ['message'],
render: function (createElement) {
  // `<div><slot :text="message"></slot></div>`
  return createElement('div', [
    this.$scopedSlots.default({
      text: this.message
    })
  ])
}

If you want to pass scoped slots to child components using a render function, you can use the scopedSlots field in the VNode data object:

render: function (createElement) {
  // `<div><child v-slot="props"><span>{{ props.text }}</span></child></div>`
  return createElement('div', [
    createElement('child', {
      // Pass `scopedSlots` in the data object
      // The format is { name: props => VNode | Array<VNode> }
      scopedSlots: {
        default: function (props) {
          return createElement('span', props.text)
        }
      }
    })
  ])
}

5. JSX

If you write a lot of render functions, you might find it painful to write code like this:

createElement(
  'anchored-heading', {
    props: {
      level: 1
    }
  }, [
    createElement('span', 'Hello'),
    ' world!'
  ]
)

Especially when the corresponding template is so simple:

<anchored-heading :level="1">
  Hello world!
</anchored-heading>

That's why there is a Babel plugin for using JSX syntax in Vue, which allows us to return to a syntax that is closer to templates.

import AnchoredHeading from './AnchoredHeading.vue'

new Vue({
  el: '#demo',
  render: function (h) {
    return (
      <AnchoredHeading level={1}>
        Hello world!
      </AnchoredHeading>
    )
  }
})

Using h as an alias for createElement is a common convention in the Vue ecosystem, and is actually required by JSX. Starting with version 3.4.0 of the Vue Babel plugin, we automatically inject const h = this.$createElement into any methods and getters declared with ES2015 syntax (not functions or arrow functions) that have JSX, so you can get rid of the (h) parameter. For earlier versions of the plugin, the application will throw an error if h is not available in the current scope.

6. Functional Components

The anchor title component created earlier is relatively simple. It does not manage any state, does not listen to any state passed to it, and has no lifecycle methods. In reality, it's just a function that accepts some props. In such scenarios, we can mark the component as functional, which means it is stateless (no reactive data) and has no instance (no this context). A functional component looks like this:

Vue.component('my-component', {
  functional: true,
  // Props is optional props: {
    // ...
  },
  // To make up for the lack of an instance // provide a second argument as the context render: function (createElement, context) {
    // ...
  }
})

Note: In versions prior to 2.3.0, the props option was required if a function component wanted to receive props. In version 2.3.0 and above, you can omit the props option and all attributes on the component will be automatically and implicitly resolved as props.

When using functional components, the reference will be HTMLElement, since they are stateless and instanceless.

In version 2.5.0 and above, if you use single-file components, template-based functional components can be declared like this:

<template functional>
</template>

Everything a component needs is passed in as context parameter, which is an object with the following fields:

• props： an object providing all props
• children： array of VNode child nodes
• slots： A function that returns an object containing all slots
• scopedSlots : (2.6.0+) An object that exposes the passed in scoped slots. Also exposes normal slots as functions.
• data： The entire data object passed to the component, passed into the component as the second parameter of createElement
• parent : A reference to the parent component
• listeners : (2.3.0+) An object containing all event listeners registered by parent components for this component. This is an alias for data.on.
• injections : (2.3.0+) If the inject option is used, this object contains properties that should be injected.
  

After adding functional : true , we need to update the render function of our anchor title component to add a context parameter to it, update this.$slots.default to context.children , and then update this.level to context.props.level.

Because functional components are just functions, rendering overhead is much lower.

They are also very useful as wrapper components. For example, when you need to do this:

• Programmatically select one of multiple components to render on your behalf;
• Manipulate children, props, data before passing them to child components.
  

Here is an example of a smart-list component that can render a more specific component based on the value of the passed prop:

var EmptyList = { /* ... */ }
var TableList = { /* ... */ }
var OrderedList = { /* ... */ }
var UnorderedList = { /* ... */ }

Vue.component('smart-list', {
  functional: true,
  props: {
    items: {
      type: Array,
      required: true
    },
    isOrdered: Boolean
  },
  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
    )
  }
})

1. Pass attributes and events to child elements or child components

In normal components, attributes that are not defined as props are automatically added to the root element of the component, replacing or intelligently merging existing attributes of the same name.

Functional components however require you to explicitly define this behavior:

Vue.component('my-functional-button', {
  functional: true,
  render: function (createElement, context) {
    // Completely transparently transmit any attributes, event listeners, child nodes, etc.
    return createElement('button', context.data, context.children)
  }
})

By passing context.data as the second argument to createElement , we pass along all of the attributes and event listeners on my-functional-button . In fact this is so transparent that those events don't even require the .native modifier.

If you use template-based functional components, you also need to add attributes and listeners manually. Because we have access to its own context, we can pass any HTML attribute using data.attrs and any event listeners using listeners (an alias for data.on ).

<template functional>
  <button
    class="btn btn-primary"
    v-bind="data.attrs"
    v-on="listeners"
  >
    <slot/>
  </button>
</template>

2. Comparison between slots() and children

You might be wondering why both slots() and children are needed. Isn't slots().default similar to children ? In some cases, yes — but what about a functional component with children like the following?

<my-functional-component>
  <p v-slot:foo>
    first
  </p>
  <p>second</p>
</my-functional-component>

For this component, children will give you two paragraph tags, while slots().default will only pass the second anonymous paragraph tag, and slots().foo will pass the first named paragraph tag. It has both children and slots(), so you can choose to make your component aware of a slot mechanism, or simply hand it off to other components by passing children.

7. Template compilation

You might be interested to know that Vue templates are actually compiled into render functions. This is an implementation detail and usually not a concern. But if you want to see how the template functionality is compiled, you might find it very interesting. Here is a simple example of using Vue.compile to compile a template string on the fly:

<div>
        <header>
          <h1>I'm a template!</h1>
        </header>
        <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!")])])}
}

This is the end of this article about rendering functions & JSX details. For more relevant rendering functions & JSX content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!