Vue 3 — Render Functions Basics
Tags: javascript, webdev, beginners, programming
Published: 2021-01-19 00:29:59

---
title: Vue 3 — Render Functions Basics
published: true
date: 2020-07-28 01:14:26 UTC
tags: javascript,webdev,beginner,programming
canonical_url: https://thewebdev.info/2020/07/28/vue-3%e2%80%8a-%e2%80%8arender-functions-basics/?utm_source=rss&utm_medium=rss&utm_campaign=vue-3%25e2%2580%258a-%25e2%2580%258arender-functions-basics
---

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

**Even more articles at http://thewebdev.info/**

Vue 3 is the up and coming version of Vue front end framework.

It builds on the popularity and ease of use of Vue 2.

In this article, we’ll look at how to create render functions with Vue 3.

### Render Functions

Templates should be used most of the time to build Vue components.

However, there may be cases where we need more flexibility.

For instance, we may want to add elements with dynamic tags.

Instead of writing:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <variable-heading :level="1">foo</variable-heading>
    </div>
    <script>
      const app = Vue.createApp({});

      app.component("variable-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>
        `,
        props: {
          level: {
            type: Number,
            required: true
          }
        }
      });

      app.mount("#app");
    </script>
  </body>
</html>

```

We can make the heading tags dynamic with a render function.

For example, we can write:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <variable-heading :level="1">foo</variable-heading>
    </div>
    <script>
      const app = Vue.createApp({});

      app.component("variable-heading", {
        render() {
          const { h } = Vue;

          return h(`h${this.level}`, {}, this.$slots.default());
        },
        props: {
          level: {
            type: Number,
            required: true
          }
        }
      });

      app.mount("#app");
    </script>
  </body>
</html>

```

We created the `variable-heading` component with a `render` method to render our HTML.

The `h` method lets us render our items.

The first argument is the tag name.

The 2nd is any props or attributes we want to pass to it.

And the 3rd argument is an array fo children.

`this.$slots.default()` is the default slot to let us populate content,

The rest of the component are the same as the other parts.

Every element in the DOM is a node, and the `h` method lets us render the nodes by nesting them as we do in a tree.

### The Virtual DOM Tree

Vue keeps a virtual DOM tree to keep track of changes is needs to make to the real DOM.

The `h` method returns an object that has the information needed for Vue to update the read DOM.

### `h()` Arguments

The `h` method takes 3 arguments.

The tag name is the first argument. It can be a string, object, function, or `null` .

If it’s an object, then it must be a component or async component.

The 2nd argument is an object with optional props.

The 3rd argument is a string, array, or object of child nodes.

It’s also optional.

### VNodes Must Be Unique

We can’t have duplicate VNodes in our render function.

So we can’t have:

```
render() {
  const myParagraphVNode = Vue.h('p', 'hi')
  return Vue.h('div', [
    paragraph, paragraph
  ])
}

```

We can’t have 2 `paragraph` s in the array.

### Conclusion

We can use render functions to tell Vue how to render components with JavaScript.

This is an alternative to templates.

The post [Vue 3 — Render Functions Basics](https://thewebdev.info/2020/07/28/vue-3%e2%80%8a-%e2%80%8arender-functions-basics/) appeared first on [The Web Dev](https://thewebdev.info).