Learning Vue

Chapter 7. Advanced Rendering, Dynamic Components, and Plugin Composition

In the previous chapters, you learned how Vue works, how to compose components with Options API and Composition API, and how to incorporate data from an external resource into your Vue application using Axios.

This chapter will introduce a more advanced aspect of rendering in Vue. We will explore how to compute functional components using the rendering function and JSX and how to dynamically and conditionally render elements using Vue’s component tag. We will also learn how to register a custom plugin for use within the application.

The Render Function and JSX

With the Vue compiler API, Vue processes and compiles all the HTML templates used for a Vue component into the Virtual DOM upon rendering. When data of a Vue component are updated, Vue triggers the internal render function to send the latest value to the Virtual DOM.

Using template is the most common approach to creating a component. However, we need to bypass the HTML template parser process in specific scenarios, such as optimizing performance, working on a server-side rendering application, or working on a dynamic component library. By returning the rendered virtual node from the Virtual DOM directly and skipping the template compiling process, render() is the solution for such cases.

Using the Render Function

In Vue 2, the render() function property receives a createElement callback parameter. It returns a valid VNode¹ by triggering createElement ...