What is the difference between react and vue virtual dom?

There is no difference between the virtual dom of react and vue; the virtual dom of react and vue both use js objects to simulate the real DOM, and use the diff of the virtual DOM to minimize updating the real DOM, which can reduce unnecessary performance Loss is divided into different types according to the granularity. Compare DOM nodes at the same level and perform operations of adding, deleting and moving.

The operating environment of this tutorial: Windows 10 system, react17.0.1 version, Dell G3 computer.

What is the difference between the virtual dom of react and vue

No difference.

The virtual DOM of react and vue are the same. They both use JS objects to simulate the real DOM, and then use the diff of the virtual DOM to minimize the update of the real DOM.

Except for a few implementations, the first half of the two (using JS objects to simulate the real DOM) is almost the same.

For the second half (using virtual DOM diff to minimize updating the real DOM), the two algorithms are similar, including replace delete insert, etc.

Vue and react both use virtual dom Algorithm to minimize updating the real DOM, thereby reducing unnecessary performance loss.

According to the granularity, it is divided into tree diff, component diff and element diff. Tree diff compares DOM nodes at the same level and performs add, delete and move operations. If a component is encountered, the tree diff process will be restarted.

Although the two update strategies for DOM are different, react uses top-down full diff, and vue uses a partial subscription model. But this actually has nothing to do with the virtual dom

The update strategy of dom is different

react will fully diff from top to bottom.

vue will track The dependencies of each component do not require re-rendering the entire component tree.

1. In react, when the state changes, the component tree will be fully diffed from top to bottom, re-render the page, regenerate a new virtual dom tree, compare the old and new dom trees, and perform patching The patching method is to locally update the DOM. Therefore, in order to avoid unnecessary child component updates caused by updating the parent component, React can make logical judgments in shouldComponentUpdate, reduce unnecessary renders, and regenerate the virtual DOM to perform a difference comparison process. .

2. In vue, convert all these data properties into getters/setters through Object.defineProperty. At the same time, the watcher instance object will record the property as dep when the component is rendered. When the setter in the dep item is called, watch will be notified to recalculate, causing the associated component to be updated.

Diff algorithm uses the key of the element to determine whether the element is added, deleted, or modified, thereby reducing unnecessary re-rendering of elements.

Recommended learning: "react video tutorial"

The above is the detailed content of What is the difference between react and vue virtual dom?. For more information, please follow other related articles on the PHP Chinese website!