SoFunction
Updated on 2025-04-07

How to use virtual DOM in vue

1. Vue's virtual DOM (VNode VDOM)

Virtual DOM is a JS object, which is used to describe the real DOM

1.1 Why is virtual dom easy to use

demo1: Perform dom operations multiple times

<body>
    <div style="width: 200px; border:1px solid #000;"></div>
    <script>
        var box = ('.box');
        var count = 0;
        ('a')
        for (var i = 1; i < 10002; i++) {
            count = i
             += count
        }
        ('a')
    </script>
</body>

demo2: Only perform dom operation once

var box = ( '.box' ) ;
    var num = “0” 
    ( 'b' )
      for ( var i = 1 ; i < 10002 ; i ++ ){
        num += i 
      }
       = num
    ( 'b' )
  • Comparison of runtime: Get conclusions
  • The more real dom operations, the more performance is lost.
  • Operating data should greatly reduce performance losses and improve rendering efficiency

1.2 The difference between the three solutions for updating the DOM

The first solution to update the DOM

  • 1. Data data
  • 2. Template
  • 3. Combining data + templates to generate real DOM -> Views
  • 4. Data has changed
  • 5. Data + templates combine to generate real DOM and replace the original DOM

defect:

  • 1. The first time a complete DOM fragment was generated
  • 2. The complete DOM fragment was generated for the second time
  • 3. The second DOM replaces the first DOM, which is very performance-consuming

The second solution to update the DOM

  • 1. Data data
  • 2. Template
  • 3. Combining data + templates to generate real DOM -> Views
  • 4. Data changes
  • 5. Combining data + templates, generate real DOM, and do not directly replace the original DOM.
  • 6. Compare the new DOM (DocumentFragment) with the original DOM and find the difference
  • 7. Find the changes (such as the input box has changed)
  • 8. Use only the input element in the new DOM to replace the input element in the old DOM.

defect:

  • Although the DOM is only a local replacement, the calculation during comparison is relatively performance-consuming, so the performance improvement is not obvious

The third solution to use virtual DOM

  • 1. Read data data
  • 2. Read the template
  • 3. Data + Template Generate virtual DOM (virtual DOM is a JS object, which is used to describe the real DOM) (loss performance)
  • The real dom originally planned to be generated: <div id="abc"><span> hello world </span></div>
  • Virtual DOM: ['div', {id: 'abc'}, ['span', '', 'hello world']]
  • 4. Use the structure of the virtual DOM to generate a real DOM -> View display (use you can generate a real DOM based on the virtual DOM) Real DOM: <div id='abc'><span></span></div>
  • 5. When data changes
  • 6. Data + Template Generate a new virtual DOM: ['div', {id: 'abc'}, ['span', '', 'hi world111111']]
  • 7. Compare the difference between the original virtual DOM and the new virtual DOM (diff algorithm). For example, the difference found is that the content in the span has changed (which greatly improves performance)
  • 8. Generate the real DOM to change the parts (createElement can generate the real DOM based on the virtual DOM)
  • 9. Render different parts on the page (directly operate the DOM and change the content in the span)

Advantages of virtual DOM:

  • 1. Performance has been improved
  • 2. It enables cross-end applications, such as: React Native (RN)

The rendering process of V (virtual virtual) DOM and the principle of virtual DOM

  • 1. Obtain data
  • 2. Create VDOM based on data. A virtual DOM is a JS object, which is used to describe the real DOM (equivalent to assign values ​​to objects)
  • 3. Generate real DOM based on VDOM rendering (according to createElement('DIV'))
  • 4. When the data changes, a new VDOM will be generated.
  • 5. Compare the VDOMs generated multiple times through the diff algorithm, compare different contents, and then render the real DOM. The same content will not be rendered. This is the 'on-site multiplexing' of VDOM | 'lazy principle'

2. The role of key value in vue

The key is the identifier of the virtual dom object. The key plays an extremely important role when updating.

2.1 Understand the role of key values

When the status data changes, vue will generate a new virtual dom based on the [new data]

Then vue performs a diff comparison between [new virtual dom] and [old virtual dom]. The comparison rules are as follows:

a. If the old virtual dom finds the same key as the new virtual dom

  • (1) If the content in the old virtual dom has not changed, use the previous real dom directly
  • (2) If the content in the old virtual dom has changed, a new real dom will be generated and then the real dom in the page will be replaced.

b. If the old virtual dom does not find the same key as the new virtual dom Create a new real dom based on the data and then render to the page

2.2 Use index index value as key value

data:

[{ id: 1, name: 'Little Li', age: 18 },
{ id: 2, name: 'Xiao Zhang', age: 19 }]

The initial virtual dom

&lt;li key=0&gt;Little Li------18  &lt;input type="text" /&gt;&lt;/li&gt;
&lt;li key=1&gt;Xiao Zhang------19  &lt;input type="text" /&gt;&lt;/li&gt;

Updated data

{ id: 3, name: 'Xiao Wang', age: 20 },
{ id: 1, name: 'Little Li', age: 18 },
{ id: 2, name: 'Xiao Zhang', age: 19 }

Virtual dom after updating data

&lt;li key=0&gt;Little King------20  &lt;input type="text" /&gt;&lt;/li&gt;
&lt;li key=1&gt;Little Li------18  &lt;input type="text" /&gt;&lt;/li&gt;
&lt;li key=2&gt;Xiao Zhang------19  &lt;input type="text" /&gt;&lt;/li&gt;

2.3 Use id index value as key value

data:

[{ id: 1, name: 'Little Li', age: 18 },
{ id: 2, name: 'Xiao Zhang', age: 19 }]

The initial virtual dom

&lt;li key=1&gt;Little Li------18 &lt;input type="text" /&gt;&lt;/li&gt;
&lt;li key=2&gt;Xiao Zhang------19 &lt;input type="text" /&gt;&lt;/li&gt;

Updated data

{ id: 3, name: 'Xiao Wang', age: 20 },
{ id: 1, name: 'Little Li', age: 18 },
{ id: 2, name: 'Xiao Zhang', age: 19 }

Virtual dom after updating data:

&lt;li key=3&gt;Little King------20 &lt;input type="text" /&gt;&lt;/li&gt;
&lt;li key=1&gt;Little Li------18 &lt;input type="text" /&gt;&lt;/li&gt;
&lt;li key=2&gt;Xiao Zhang------19 &lt;input type="text" /&gt;&lt;/li&gt;

The main purpose of key is to efficiently update the virtual DOM. Its principle is that during the data update process, vue can accurately determine whether the two nodes are the same through the key, thereby avoiding frequent updates of different elements, making the entire update process more efficient, reducing the DOM operation amount, and improving performance.

In addition, if you do not set the key, it may cause some hidden bugs when the list is updated.

When switching between transitions (transition components) of the same label name element in vue, the key attribute will also be used. The purpose is to allow vue to distinguish them. Otherwise, vue will only replace its internal attributes without triggering the transition effect.

3. Why can't v-if and v-for be used on the same element

v-for is preferred over v-if, that is, you need to traverse the entire array every time, affecting the speed.

<div
    v-for="(fileMsg,index) in fileMsgList"
    :key=""
    v-if="index < 2"
    >
    <sys-file-layout :fileMsg="fileMsg"></sys-file-layout>
</div>

If there are 100 pieces of data, although two pieces are displayed, it needs to be traversed 100 times, because v-for is preferred

A better solution: Use computed to obtain the data that meets the conditions first, and then traverse it

Summarize

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