Vue 3 is in beta and it’s subject to change.
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.
