Virtual dom in vue

What is virtual DOM

DOM manipulation is a very expensive and inefficient operation in web development, especially if the user interface is updated frequently. At this point, re-rendering the entire DOM tree on every data update can cause app performance to suffer.

To solve this problem, virtual DOM is introduced into front-end development. Virtual DOM abstracts the entire DOM tree into a JS object, so that developers can directly manipulate JS objects without frequently manipulating the DOM.

Virtual DOM simplifies DOM operations, and at the same time ensures that the number of DOM operations is minimized through optimization algorithms, thereby improving application performance.

Introduction to virtual DOM in Vue

The virtual DOM in Vue is an efficient and powerful technology that enables fast rendering and updating of the UI while implementing data-driven views. In Vue, we can use Vue's template syntax to create views. Vue converts the templates into actual DOM elements and inserts them into the document. In the linear model, JavaScript is required to manipulate DOM elements every time the view is updated. These operations may include creating, updating, inserting, deleting or moving DOM elements.

Because the performance bottleneck of refreshing the UI usually lies in DOM operations, Vue introduces the concept of virtual DOM. The virtual DOM is a JavaScript object tree containing all nodes and markup, which maps to the actual DOM. Different from the actual DOM, the virtual DOM has the characteristics of lightweight, high efficiency and quick modification.

In Vue, each component tree has a corresponding virtual DOM tree. When the application state changes, Vue will compare the virtual DOM tree of the new state and the old state, find out the changed part and render it into a specific DOM operation, and finally only need to perform DOM operation on the changed part.

In Vue, each virtual DOM node is associated with a Vue component instance. When the component state changes, Vue will rebuild the virtual DOM tree and find out the changed part.

Working principle of virtual DOM in Vue

When Vue is running, it synchronizes the virtual DOM with the actual DOM tree. When the data changes, Vue runs to recalculate the virtual DOM tree, find and mark the changed nodes, and update them to the actual DOM tree.

1. Create virtual DOM node tree

When Vue creates a virtual DOM, it parses the template into some abstract nodes, and then converts these abstract nodes into virtual DOM nodes. Each node contains a node type, a list of attributes and a list of child nodes.

In Vue, you can use the createElement function to create virtual DOM nodes. The createElement function accepts three parameters, which are the tag name, attribute object and child node:

createElement('div', {
    
     class: 'container' }, [
  createElement('h1', {
    
     class: 'title' }, 'Hello World'),
  createElement('p', {
    
     class: 'text' }, 'This is a paragraph.'),
])

2. Compare and update the virtual DOM node tree

When Vue data changes, it will recalculate the virtual DOM tree and look for nodes that are different from the previous version. Vue finds these nodes by comparing the old and new virtual DOM, and determines which nodes need to be updated. This process is called the "difference algorithm"

3. Perform DOM manipulation, apply diffs

When Vue runs to recompute the virtual DOM, it gets a set of instructions describing how to update the DOM. These directives tell Vue where elements should be inserted, removed or modified. Vue will perform real DOM operations according to these instructions, so as to update the UI.

Therefore, the algorithm used in Vue for difference comparison can be summarized into the following three steps:

1. Compare on the JS object to find out the newly added and deleted nodes.
2. Classify the nodes to find out which nodes need to be reordered and whose positions have been moved.
3. Update DOM nodes.

Virtual DOM has the following advantages

1. Faster speed: Since DOM operations are very resource-intensive, using virtual DOM can avoid frequent operations on the real DOM tree and improve performance.
2. Component-based development: Vue splits the application into small, highly reusable components, and uses a separate virtual DOM tree for each component, making component development and maintenance easier.
3. Platform independent: Virtual DOM has nothing to do with browsers, nor does it depend on any specific user interface library or framework, so it can be used in different platforms and environments.
4. Optimize the development process: By comparing the differences between the old and new virtual DOM trees, developers can more accurately know which parts need to be updated, thereby optimizing the page rendering process.

Why do you need to set the key value in the v-for instruction

v-for is an important instruction in Vue, which is used to render lists dynamically. When Vue processes an element with v-for, Vue will reuse the same DOM element instead of creating a new one every time. To avoid problems, when Vue renders lists using the v-for directive, each rendered DOM element requires a unique identifier. When the data changes, Vue uses the key to determine which element is new, which element has been deleted, and which element has been moved.

Setting the key attribute allows Vue to track which elements have been added, updated, or deleted, thereby reducing the number of DOM operations. If the key attribute is not set, Vue may mistakenly think that two different elements are the same, causing DOM rendering errors.

The problem of not setting the key value

If we don't set the key value, Vue will use the node's index as the key value by default. If the order of the data items changes, the elements in the list are reordered. This may cause some elements that do not need to be updated to be re-rendered, causing unnecessary DOM operations and reducing performance.

If we use the index of the object as the key value, then when we sort or filter the list, we will also encounter the same problem. Because the index is not representative, DOM elements will be rendered out of order and repeated, which will affect the user's interactive experience.

Solution: Use a unique identifier as the key value

We can use unique identifiers as key values. Under normal circumstances, we use the ID of the row data as the key value, which can avoid errors when updating DOM elements. If the data item does not have an ID attribute, you can use other unique identifiers as key values, such as name, date, or any other attribute that meets our needs. Ultimately, we need to ensure that key values ​​are unique across the entire list.