Accessing the virtual DOM using render functions in Vue.js

Accessing the virtual DOM using render functions in Vue.js

In this post, we will look at how to use render functions to unleash the power of JavaScript by using templates in Vue.js

Originally published by Nwose Lotanna at https://blog.logrocket.com

Before you start

This post is suited for developers of all stages including beginners. Here are a few things you should already have before going through this article.

You will need the following on your pc:

  • Node.js version 10.x and above installed. You can verify if you do by running the command below in your terminal/command prompt:
node -v
npm uninstall -g vue-cli

then install the new one:

npm install -g @vue/cli
  • Download a Vue starter project here
  • Unzip the downloaded project
  • Navigate into the unzipped file and run the command to keep all the dependencies up-to-date:
npm install

Introduction: How Vue works in browsers

Vue.js has a focus on the view layer of your JavaScript projects and that is why the templates are provided to show your presentation (markup language). The node is the smallest unit of constructs in the DOM, so when template code like this is sent to the DOM, the browser breaks it all down to nodes:

<div> 
 <h1>My first heading is this </h1>
 <p>The paragraph text stays here </p>
</div>

So the heading is a node and the header text is a child node inside the header node, just as the paragraph is a node and the text in it is a child node. To update these nodes, Vue, provides a template to write the presentation code while it assembles the nodes.

So for a paragraph like the one above, you simply write this in the template section:

<p>The paragraph text stays here </p>

Or use a render function to create it, like this:

render: function (createElement) {
  return createElement('p', 'The paragraph text stays here')
}

You can quickly notice the level of abstraction you get with Vue as you compare both methods. The render function, however, closer to the compiler as the template code will still need transcribing to JavaScript.

How Vue manages nodes

To monitor and properly manage these nodes, Vue JS builds a virtual DOM where it does the dirty work of keeping up with nodes and how they change from the point of mounting onInit to when they are un-mounted (at onDestroy) as virtual nodes. A virtual DOM is simply a component tree of all the virtual nodes.

Render function

This is the function in JavaScript used inside a Vue component to perform tasks like creating an element. Here we see the function that is shown above:

render: function (createElement) {
      return createElement('p', 'The paragraph text stays here')
    }

You see that the argument createElement is used to create a new element in the DOM, behind the scenes it returns a virtual node. Virtual nodes are called VNodes in Vue JS.

The render function’s createElement accepts up to three parameters:

  1. The first parameter is called the render element, it is required for createElement to work, it can be a string or even a function. It is usually an HTML tag name, a component option or a function that resolves to a tag name.
  2.  The second parameter is the definition of the component or the HTML tag name in the last parameter. It is usually an object and it is an optional parameter. It is a data object that corresponds to the parameter that will be created in the DOM.
  3. The third parameter is the children parameter, it can either be a string or an array of the data value or child node of the first parameter.

Demo

To illustrate the render function, let us see a sample example, if you read this post from the start you will have downloaded the starter project, unzipped and opened it up in your VS Code application. Open your App.vue file and make sure it looks like this:

<template>
  <div id="app">
    <p>{{greetings}} </p>
  </div>
</template>
<script>
import Test from './components/Test.vue'
export default {
  name: 'app',
  components: {
    Test
  },
  data(){
    return {
      greetings: 'The paragraph text stays here'
    }
  }
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

This is exactly what we had as our first code sample at the start of this post. To use the render function approach, remember it is a pure JavaScript concept in Vue so open up the main.js file, it should look like this:

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')

This is where the default mounting statement is kept by Vue and how the app.vue file is the root component. Add this code block before the new Vue code block, just immediately after the third line:

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
Vue.component('Hello', {
   render(createElement){
    return createElement('p', 'The rendered paragraph text stays here');
 }
})
new Vue({
  render: h => h(App),
}).$mount('#app')

This creates a new Vue component called Hello and then creates a paragraph element inside it. The paragraph will look exactly as if you opened a new .vue file like the Test component in the project directory. To test it out, go back to the app.vue file and add the Hello component in the template and watch it appear in your browser.

<template>
  <div id="app">
    <p>{{greetings}} </p>
    <Hello />
  </div>
</template>

Here is what it will look like in the browser:

Utilizing the power of JavaScript

You can leverage your knowledge of JavaScript to really control the virtual DOM as you already know that using the render function gives you direct control to the Vue virtual DOM. You can add a data object with values and then use this to refer to it like this:

Vue.component('Hello', {
  render(createElement){
    return createElement('p', this.greetings);
  },
  data(){
    return {
      greetings: 'The paragraph text stays here'
    }
  }
})

This displays the created paragraph with the text specified in the data object.

Using props

You can also make use of your favorite Vue JS constructs like props, for instance. If your app.vue template section has a car property like this:

<template>
  <div id="app">
    <p>{{greetings}} </p>
    <Hello car=" driving a Ferari"/>
  </div>
</template>

You can make reference to it using the props in the main.js file like this:

Vue.component('Hello', {
  render(createElement){
    return createElement('p', this.greetings + this.car);
  },
  data(){
    return {
      greetings: 'The paragraph text stays here'
    }
  },
  props: ['car']
})

Here is what it will look like in the browser:

Creating nested components

You can also nest elements with the render function like this:

Vue.component('Hello', {
      render(createElement){
        return createElement('ul', 
          [createElement('li',[createElement('p', 'I am a nested list item')])]);
      },
      data(){
        return {
          greetings: 'The paragraph text stays here'
        }
      },
      props: ['car']
    })

Here is what it will look like in the browser:

Conclusion

This has been a good introduction into accessing the Vue virtual DOM with render functions. It is a very direct way to communicate with the DOM and with knowledge of both Vue and JavaScript itself, you can comfortably have total control over the DOM.

Thanks for reading

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading

The Complete JavaScript Course 2019: Build Real Projects!

Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

Nuxt.js - Vue.js on Steroids

Best JavaScript Frameworks, Libraries and Tools to Use in 2019

Build a Progressive Web App In VueJs

Build a CMS with Laravel and Vue

Beginner’s Guide to Vue.js

Hands-on Vue.js for Beginners

Top 3 Mistakes That Vue.js Developers Make and Should be Avoided

Microfrontends — Connecting JavaScript frameworks together (React, Angular, Vue etc)

Ember.js vs Vue.js - Which is JavaScript Framework Works Better for You

Vue.js Tutorial: Zero to Sixty


vue-js javascript web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Top Vue.js Developers in USA

Vue.js is an extensively popular JavaScript framework with which you can create powerful as well as interactive interfaces. Vue.js is the best framework when it comes to building a single web and mobile apps.

Displaying Modals in a Vue App with the vue-js-modal Library

A modal with many options. Displaying Modals in a Vue App with the vue-js-modal Library. Vue.js is an easy to use web app framework that we can use to develop interactive front end apps. In this article, we’ll look at Vue packages for adding modals with the vue-js-modal library.

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...