Table of contents
2. Differences in component writing
3. The diff algorithm is different
4. Responsive principles are different
First find the commonality of Vue and React, what problems they are used to solve, and then dig out their unique personality, design principles and future trends.
The difference between vue and react
common ground
Vue and React have a lot in common:
Data Driven View
Componentization
Both use Virtual DOM
1. Data Driven View
In the era of jQuery, we need to frequently operate the DOM to achieve page effects and interactions; and Vue and React solve this pain point, adopting a data-driven view method to hide the frequent operations of operating the DOM. So when we develop, we only need to pay attention to data changes, but the implementation methods of the two are different.
2. Componentization
Both React and Vue follow the idea of componentization. They focus on the UI layer and divide the page into some small blocks. These blocks are components, and the combination and nesting of components form the final web interface.
Therefore, there are the same routines during development, such as parent-child component transfer, data state management, front-end routing, slots, etc.
3. Virtual DOM
Both Vue and React use the Virtual DOM + Diff algorithm. Whether it is Vue's Template template + options api writing method, or React's Class or Function writing method, the render function is finally generated, and the render function returns VNode (the data structure of virtual DOM, which is essentially a tree).
Every time the UI is updated, the latest VNode will always be regenerated according to the render, and then compared with the old VNode cached before, and then the Diff algorithm (the core of the framework) will be used to actually update the real DOM (virtual DOM is a JS object structure, also in the JS engine, while the real DOM is in the browser rendering engine, so operating the virtual DOM is much less expensive than operating the real DOM)
Vue and React common process:
difference
Although both Vue and React are frameworks for building user interfaces, there are also big differences. First of all, the core ideas of the two are different.
1. Different core ideas
In the early development of Vue, Yu Yuxi was the boss, so the positioning is to lower the threshold of front-end development as much as possible, so that more people can get started with development faster. This is the main feature of Vue: a flexible and easy-to-use progressive framework for data interception/proxy, which is more sensitive and accurate to detect changes in data.
React's positioning from the beginning is to propose new ideas for UI development. Relying on the big company Facebook's React, there has been no shortage of attention and users from the beginning, and what React wants to do is to subvert the front-end development method in a better way. So React advocates functional programming (pure components), immutable data and one-way data flow. Of course, where two-way is required, it can also be implemented manually, such as with onChange and setState.
Due to the difference in the core ideas of the two, there are many differences in the subsequent design of Vue and React.
2. Differences in component writing
The method recommended by React is JSX + inline style, that is, all HTML and CSS are written into JavaScript, that is, all in js; the method recommended by Vue is the single-file component format of template (simple and easy to understand, easy to understand from the traditional front-end), that is, html, css, and JS are written in the same file (vue also supports JSX writing)
This difference is partly due to the different core ideas of the two.
3. The diff algorithm is different
The traditional Diff algorithm is to loop and recurse each node:
traditional diff
As shown in the figure above, compare from the left a node in turn: a->d, a->e, a->b, a->a, a->c, and the remaining nodes are also compared with each node of the right tree.
O(n²)Compare the required complexity of all the nodes in the two trees one by one. During the comparison process, it is found that the old node is not found in the new tree, then the old node needs to be deleted, and the time complexity of deleting a node of a tree (finding a suitable node to be deleted) is . Similarly, the complexity of adding a new node is also, and the complexity of diffing the two treesO(n)togetherO(n)isO(n³)
传统iff算法复杂度太高，vue2.x加入了 Virtual Dom和react拥有 相同的diff优化原则(将算法复杂度降为0(n))。
两者流程思路上是类似的:
- Different components produce different DOM structures. When the types are different, the corresponding DOM operation is to directly destroy the old DOM and create a new DOM.
同一层次的一组子节点，可以通过唯一 的key区分。
I saw a very vivid picture on the Internet:
But the source code implementation is completely different:
The core implementation of React's Diff algorithm
- React first traverses the new collection, for(name in nextChildren).
- Use the unique key to determine whether the same node exists in the old collection. create if not
- if any, if (preChild === nextChild )
- Will compare the position of the node in the new collection with the lastIndex in the old collection
- If if (child._mountIndex < lastIndex) the move operation is performed, otherwise no move operation is performed.
- If during the traversal process, it is found that there are no nodes in the new collection, but there are nodes in the old collection, it will be deleted
The core implementation of Vue's Diff algorithm
updateChildren is the core of vue diff, the process can be summarized as:
- The old children and the new children each have two head and tail variables StartIdx and EndIdx, and their two variables are compared with each other, and there are 4 comparison methods in total.
- If none of the four comparisons match, if the key is set, the key will be used for comparison. During the comparison process, the variable will lean towards the middle. Once StartIdx>EndIdx indicates that at least one of the old children and the new children has been traversed, the comparison will end.
The following diagram can be used to describe the four steps in a comparison process:
The core Diff algorithm of Vue2 adopts the algorithm of double-end comparison. At the same time, it starts to compare from both ends of the old and new children, and uses the key value to find reusable nodes, and then performs related operations. Compared with React's Diff algorithm, it can reduce the number of moving nodes in the same situation, reduce unnecessary performance loss, and is more elegant.
4. Responsive principles are different
Vue
- Vue relies on collection, automatic optimization, and variable data.
- Vue recursively listens to all attributes of data and modifies them directly.
- When the data changes, automatically find the referenced component and re-render.
React
React is based on a state machine, manually optimized, and the data is immutable. It needs setState to drive the new state to replace the old state. When the data changes, the component is the root directory and all are re-rendered by default, so the shouldComponentUpdate life cycle function method is needed in React to control
5. Other differences
In addition to the above four points, there are many differences in the details. For example, the difference in API is quite large. In order to make it easier to use, Vue introduces concepts such as instructions and filters and a large number of option APIs, such as watch and computed, which are very easy to use.
And React has fewer APIs, if your JavaScript foundation is better, it is easier to get started
Of course, if you have seen the source code of the two, you can also talk about the differences between the two source codes. Here is a diagram of their source code compilation process, so that you can better read the source code.
Vue source code compilation process diagram:
React source code compilation process diagram:
React source code compilation process diagram
The above is the explanation of the difference between Vue and React. When the interviewer asks this question, the focus is on analyzing the ideas and grasping the key points to expand. Finally, we can also talk about the future development trend. In fact, with the update of Vue3, the similarity with React in use is getting higher and higher. In fact, it is very good for developers. After getting started with one framework and learning another, the learning cost will be reduced.