Render/functional components

We're going to take a detour and pivot away from validation and animations to consider the use of functional components and render functions to improve application performance. You may also hear these being referred to as "presentational components" as they're stateless and only receive data as an input prop.

So far, we've only declared the markup for our components with the template tag, but it's also possible to use the render function (as seen in src/main.js):

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

The h comes from hyperscript that allows us to create/describe DOM nodes with our JavaScript. In the render function, we're simply rendering the App component and in the future, we'll be looking at this in more detail. Vue creates a Virtual DOM to make working with the actual DOM much simpler (as well as for improved performance when dealing with a vast amount of elements).

Rendering elements

We can replace...