Detailed explanation of vue virtual DOM and render functions

vue virtual DOM and render() functions

Compared with other front-end development frameworks, the advantage is that the execution performance is relatively high. One very important reason here is the use of the virtual DOM mechanism.

Although it is recommended to use templates to build HTML in most cases, in some scenarios, JavaScript programming capabilities may be required. At this time, you need to use the render() function, which is closer to the editor than the template.

Through learning the content of this chapter, readers can understand how to use virtual DOM and render() functions.

Virtual DOM

DOM is the document object model, which provides an access model to the entire document, taking the document as a tree structure, each node of the tree represents an HTML tag or text item within the tag.

The DOM tree structure accurately describes the interrelationship between tags in HTML documents. When the browser parses HTML documents, it will convert elements, comments, text and other marks in the document into DOM trees according to their hierarchical relationship.

To display an element on a page, it must exist in the DOM, that is, the element node must be added to a node in the existing DOM tree before it can be rendered to the page. Similarly, if you need to delete an element, you also need to delete the node corresponding to the element from the DOM tree.

If you want to change the content displayed on the page, you can only query the DOM tree by traversing and then modifying the DOM tree to achieve the purpose of updating the page. This process consumes a lot of resources.

To solve this problem, the concept of virtual DOM was born with the birth of React. It was proposed by Facebook, and its excellent performance was quickly recognized by developers. Because every time you query the DOM, you almost need to traverse the entire DOM tree, if you create a virtual DOM object corresponding to the DOM tree, that is, a JavaScript object, and represent the DOM tree and its hierarchical structure in the form of object nesting, then each DOM modification becomes an operation on the properties of the JavaScript object. Since operating JavaScript objects is much faster than operating the DOM, it greatly reduces performance expenses.

Vue has also introduced the concept of virtual DOM at its core since 2.0, rewriting the implementation of virtual DOM to make the performance better.

Before updating the real DOM tree, Vue first compares the differences in the virtual DOM structure before and after the update, and then uses asynchronous update queue to update the difference part to the real DOM, thereby reducing the number of operations to be performed on the real DOM in the end and improving the rendering efficiency of the page.

render() function

In most cases, Vue creates HTML via template. However, in special cases, JavaScript's programming ability may be required. At this time, you can use the render() function, which is closer to the compiler than the template.

Let’s learn about the advantages of the render() function through a simple example. Assuming that some titles with anchor points need to be generated, the basic code is as follows:

<h1>
   <a name="hello-world" href="#hello-world" rel="external nofollow"  rel="external nofollow" >
       Hello world!
   </a>
</h1>

Since anchor titles are used very frequently, considering that the title levels include h1~h6, the title level can be defined as the component's prop. When calling the component, the level of the title element can be dynamically set through this prop.

The code is as follows:

<anchored-heading :level="1">Hello world!</anchored-heading>

Next is the component implementation code:

const app = createApp({})
(‘anchored-heading', {
template: `
props: { level: { type: Number, required: true } } })

The above is not only lengthy to implement through templates, but also written repeatedly for each level title.

When adding an anchor element, you must also copy the element again in each v-if/v-else-if branch.

<div >
        <anchored-heading :level="2">
            <a name="hello-world" href="#hello-world" rel="external nofollow"  rel="external nofollow" >
                Look at each other without knowing each other，Long Song Huai Caiwei。
            </a>
        </anchored-heading>
    </div>
    <script src="/vue@next"></script>
    <script>
        const app = ({})
        ('anchored-heading', {
            render() {
                const { h } = Vue
                return h(
                  'h' + , // Tag name                  {}, // prop or attribute                  this.$() // Array containing its children                )
            },
             props: {
                level: {
                    type: Number,
                    required: true
                }
        })
        ('#app')
    </script>

It can be seen that the implementation of using the render() function is much thinner.

What should be noted is:

When passing children without v-slot directives to the component, such as Hello world! in anchored-heading, these children are stored in $ in the component instance. Run the program in Google Chrome.

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.