Virtual DOM

Let's change tack now and discuss how Vue renders components. Take a look at this example:

Vue.component('my-component', {
  template: '<div id="my-component">My component</div>'
});

In order for Vue to be able to render this component to the page, it will first transform the template string into a JavaScript object using an internal template compiler library:

Figure 6.14. How the template compiler turns a template string into an object

Once the template has been compiled, any state or directives can easily be applied. For example, if the template includes a v-for, a simple for-loop can be used to multiply the nodes and interpolate the correct variables.

After that, Vue can interface with the DOM API to synchronize the page with the state of the component.

Render functions

Rather than supplying a string template for your component, you can instead supply a render function. Without understanding the syntax, you can probably tell from the following example that the render...