The difference between dom in vue and react

The difference between vue and dom in react: 1. Vue will track the dependencies of each component and does not need to re-render the entire component tree; 2. For React, whenever the state of the application is changed, All components will be re-rendered.

The operating environment of this article: windows7 system, react17.0.1&&vue2.0 version, Dell G3 computer.

The concept of virtual DOM was born with the birth of react. It was proposed by Facebook. Its excellent performance was quickly recognized by the majority of developers; after react, vue2.0 also introduced the concept of virtual DOM at its core. .

What is virtual DOM?

Virtual dom is relative to the real dom rendered by the browser. Before the emergence of react, vue and other technologies, we could only change the content displayed on the page by traversing the query dom tree to find what needs to be modified. The dom then modifies the style behavior or structure to achieve the purpose of updating the ui.

This method consumes quite a lot of computing resources, because almost every time you query the dom, you need to traverse the entire dom tree. If you create a virtual dom object (js object) corresponding to the dom tree, in the form of object nesting To represent the dom tree, then every change of the dom becomes a change of the properties of the js object. In this way, the performance overhead of searching for the property changes of the js object is smaller than that of querying the dom tree.

The difference between virtual DOM in vue and react

The virtual DOM (virtual DOM) in vue and react is different.

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

For React, every time the application state is changed, all components will be re-rendered, so the shouldComponentUpdate life cycle function method is needed in react for control.

Recommended: "js Basic Tutorial"

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