Shulou(Shulou.com)05/31 Report--

This article mainly talks about "what are the differences between react and vue's virtual dom". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "what are the differences between react and vue's virtual dom?"

There is no difference between react and vue's virtual dom; both react and vue's virtual dom use js objects to simulate the real DOM, and use the diff of the virtual DOM to minimize the update of the real DOM, which can reduce unnecessary performance loss. Compare the same-level dom nodes into different types according to granularity to add, delete and move.

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

What's the difference between react and vue's virtual dom?

No difference.

The virtual dom of react and vue is the same, using JS objects to simulate the real DOM, and then using the diff of the virtual DOM to minimize updating the real DOM.

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

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

Both vue and react use the virtual dom algorithm to minimize the update of the real DOM, thereby reducing unnecessary performance loss.

According to the granularity, it can be divided into tree diff, component diff, element diff. Tree diff compares dom nodes at the same level to add, delete and move. If a component is encountered, the tree diff process will be re-created.

Although the update strategies for dom are not quite the same, react adopts a top-down full diff,vue model with local subscriptions. But it has nothing to do with virtual dom.

The update strategy of dom is different

React will be full diff from top to bottom.

Vue tracks the dependencies of each component and does not need to re-render the entire component tree.

1. In react, when the state changes, the component tree will be full diff from top to bottom, re-render the page, regenerate the new virtual dom tree, compare the new and old dom tree, patch the patch, and partially follow the new dom. Therefore, in order to avoid unnecessary child component updates caused by the update of parent components, react can make logical judgments in shouldComponentUpdate, reduce unnecessary render, and regenerate virtual dom to make a difference comparison process.

2. In vue, convert all these data attributes to getter/setter through Object.defineProperty. At the same time, the watcher instance object records the property as dep when the component is rendered, and when the setter in the dep item is called, it notifies watch to recalculate so that the associated component is updated.

The Diff algorithm judges whether the element is added, deleted or modified with the help of the Key of the element, thus reducing the unnecessary re-rendering of the element.

At this point, I believe you have a deeper understanding of "what are the differences between react and vue's virtual dom?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.