When it comes to front-end frameworks, I believe that everyone is familiar with Vue and React. These two front-end frameworks are relatively mainstream and have many users, but when we use these frameworks, do we care about the difference between these two frameworks? understand the difference? Next, let us systematically sort out the difference between these two frameworks~
Introduction to Preliminary Knowledge
Before understanding the difference between Vue and React, let's first understand the MVC and MVVM architecture, which will help us understand the subsequent knowledge.
MVC Architecture
First of all, MVC refers to Model-View-Controller, which represents the model layer, view layer, and controller respectively.
Model (model layer), which mainly manages the data of the business model and the logic for processing the data.
View (view layer) mainly receives user interaction requests and displays data information to users.
The Controller (controller layer) is mainly responsible for the bridge between the Model and the View, which is used to control the flow of the program. The Controller is responsible for ensuring that the View can access the data of the Model object that needs to be displayed. After the View receives the user's interactive request, it forwards the request to the Controller. After the Controller parses the request, it will hand it over to the corresponding Model for processing.
MVVM Architecture
The MVVM architecture refers to Model-View-ViewModel. We can see that the difference between the MVVM architecture and the MVC architecture is that there is a ViewModel part. First of all, we need to know why the MVVM architecture should be derived when the MVC architecture already exists. This is because the data types of many controls in the View are different from the properties in the Model. For example, the time data in the Model may be a string of numbers. If the View wants to display the date format, a transformation is required. View is not suitable, because there should not be logic code in View, and it is not suitable to put it in Model. This time, Model is bloated and huge, because of the existence of this problem, ViewModel was born. This layer can help View convert into corresponding data for Model or converted from Model to View can display content.
What is the difference between Vue and React?
1. Different core ideas
The core idea of Vue is to lower the threshold of front-end development as much as possible, and it is a flexible and easy-to-use progressive two-way binding MVVM framework.
The core idea of React is declarative rendering and componentization, one-way data flow, React is neither MVC nor MVVM architecture.
- RQ1: What does declarative mean?
The corresponding to the declarative type is the imperative type. The imperative type refers to the step-by-step operation of the DOM to change the web page into the desired look, while the declarative type only needs to describe what the final web page looks like through the state.
- RQ2: What does componentization mean?
Componentization refers to splitting the page into smaller, reusable components as much as possible, which makes our code more convenient to organize and manage, and makes the page more expandable.
- RQ3: How to understand React's one-way data flow?
React's one-way data flow refers to that data is mainly passed from parent nodes to child nodes through props. If a props at the top level changes, React will re-render all child nodes, but one-way data flow is not one-way binding. React In order to update the state of another component from one component, state promotion is required, that is, the state is promoted to their nearest ancestor component, which triggers the state change of the parent component, thereby affecting the display of the other component. The advantage of one-way data flow is that it can ensure the traceability of state changes. If the parent component maintains a state, if the child component can change the state of the parent component at will, then the state change of each component will become difficult to trace.
Second, the components are written differently
Vue's components are written in a single-file component format through templates.
React's components are written in JSX+inline style, that is, all HTML and CSS are written into JavaScript.
Third, the Diff algorithm is different
Diff algorithm prerequisite knowledge: virtual DOM
Before understanding the Diff algorithm, we must first know what is virtual DOM,
虚拟DOM是一个用来描述真实DOM的对象，本质是对象。
What is Diff Algorithm?
The Diff algorithm is a comparison algorithm, which mainly compares the old virtual DOM and the new virtual DOM, finds out the changed nodes, and only updates these grounded nodes without updating the unchanged nodes, so as to accurately update the DOM, Reduce the number of operations on the real DOM and improve performance.
Is the Diff algorithm depth-first or breadth-first? What is the time complexity?
The Diff algorithm is a depth-first algorithm with a time complexity of O(n).
Vue's Diff algorithm
The following is the main process of Vue's diff algorithm:
- When the data changes, the setter will be triggered, and then all the subscribers Watcher will be notified through the notify method of the Dep class, and the subscriber will call the patch method.
- The patch method will use the sameVnode method to determine whether the current virtual node of the same layer is the same type of node. If it is, it will call the patchVnode method. If it is not, it will be directly replaced with a new node.
- If it is the same type of node, patchVnode will first find the real DOM corresponding to the node, and then determine whether the old and new nodes point to the same object, and if so, return directly. If not, judge whether the text nodes are equal. If they are not equal, change the text node of the real DOM to the text content of the new node, and then look at the relationship between the old node and the child nodes of the new node. If the old one has the new one, delete the real one. The child nodes of the DOM, if the letter is old or not, add the virtual node after the virtual node is real, and if both have child nodes, execute the updateChildren function to compare the child nodes.
- The core comparison idea of the updateChildren method is to compare through the method of the head and tail pointers.
- RQ: Why is it not recommended to use index as the node key?
If we add a new node to the head of a group of nodes and use index as the key, after the diff algorithm judges that it is the same type of node through the key, it will further compare and change its content, which will cause this group of All nodes have been updated, and the last node is also created as a new node, which will cause a lot of performance waste, so it is not recommended to use index as the key.
The difference between React's diff and Vue's diff algorithm
The diff algorithms of vue and react are compared at the same level, and there are two main differences:
- Vue compares nodes. If the node element type is the same, but the className is different, it is considered to be a different type of element, and it will be deleted and rebuilt, but react will consider it to be the same type of node, and only modify the node attributes.
- Vue's list comparison uses the head-to-tail pointer method, while react uses a left-to-right comparison method. When a set only moves the last node to the first, react will move the previous nodes in turn. And vue will only move the last node to the last, from this point of view, the comparison method of vue is more efficient.
Fourth, the principle of response is different
Responsive Principles of React
React mainly updates the state through the setState() method. After the state is updated, the component will be re-rendered.
Vue's Responsive Principles
Vue will traverse the data data object, use Object.definedProperty() to convert each property into a getter and a setter, each Vue component instance has a corresponding watcher instance, and the data used by the component will be recorded when the component is first rendered. , when the data changes, the setter method will be triggered, and all watcher instances that depend on this data will be notified to call the update method to trigger the compile rendering method of the component to render the data.