Since the work needs to write React for several years, and because the work needs to write Vue in recent months, I have a certain degree of understanding and some understanding of these two frameworks. This article will start from the framework users (ie front-end developers, and next From the perspective of the same), briefly talk about modern front-end frameworks and the similarities and differences between React and Vue, without involving the analysis of source code and the underlying implementation.
modern front-end framework
First look at what React and Vue are. In short, both of them are JavaScript frameworks for building UI, generally used to develop web applications, of course, they can also be used to develop mobile apps and desktop applications (not discussed in this article). When it comes to JavaScript frameworks, we have to mention jQuery, the god-like framework. Let's make a comparison first. In order to facilitate the distinction, we introduce a concept and call frameworks such as React, Vue, and Angular modern front-end frameworks, and jQuery and other similar frameworks as jQuery-style frameworks. Taking a simple Count component as an example, the number will be +1 every time the button is clicked. The jQuery code is as follows:
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>
<p id="count">1</p>
<button id="btn">+</button>
<script>
$('#btn').click(function () {
$('#count').html(Number($('#count').html()) + 1);
});
</script>
</body>
</html>
The React code is as follows:
import { useState } from 'react';
const App = () => {
const [count, setCount] = useState(1);
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
<p>{count}</p>
<button onClick={handleClick}>+</button>
</div>
);
};
Vue code is similar to React, with no duplication.
Although the above code is simple, it completely contains the three main elements of a web application: DOM, state, and events. The biggest difference between jQuery and React is the state and DOM. In jQuery, the application state (ie count) is stored in the DOM, and in React, it is a JavaScript variable; when the state is updated, jQuery needs to manually update the DOM, while React only needs to update the state, The framework automatically syncs state to the DOM.
Obviously, the biggest difference between modern front-end frameworks and jQuery-style frameworks is declarative versus imperative. In modern front-end frameworks, we can map the state to the DOM by declarative writing, and the framework will automatically synchronize the state to the DOM. For display pages or simple web applications, the two methods are not very different for our development and code maintenance, but now that more and more content is carried on the front end, and web applications are becoming more and more complex, the imperative writing method is not. It can meet our needs too much, the code written is difficult to maintain, and the declarative writing method allows us to focus on business logic without caring about DOM updates.
Modern front-end frameworks like React and Vue are actually doing the same thing: solving the problem of synchronizing the state with the UI. It's a nightmare to imagine dealing with DOM updates while dealing with complex business logic.
Three Principles of React
As mentioned above, the three main elements of a web application are DOM, state, and events. Since React does the DOM part of the work, for users, the main concern is the state part, and the API provided by the framework is mainly status-related. In order to better manage and update the state, there are three more important principles in the React ecosystem: one-way data flow, single data source, and immutable data structures.
Unidirectional data flow
The data flow refers to the flow of the state. In React, the data flow is relatively simple and clear, that is, the DOM is generated according to the state, and then the event function is triggered by the event bound on the DOM to update the state. All processes are one-way:
single source of truth
This principle comes from Redux, that is, the global state in the entire application is only stored in one store, which is convenient for debugging and maintenance. In fact, it can also be extended, and it is also applicable to pure React components, that is, only one copy of any state is saved (except in special cases), and the state that can be calculated from other states is not saved separately.
To give two examples, one is that component A has a subcomponent B, and A passes its state to B through props. In component B, unless it is a special case, do not copy the prop and save it in its own state, but directly Use the prop value, otherwise, it may cause the state to be out of sync. Second, when displaying a Todo List, there is a function to display only the unfinished Todos. In this case, do not save a copy of the entire list and the unfinished list, but calculate the Filter out incomplete lists in all lists.
immutable data
Immutable data, sometimes called state read-only. In React, all state updates are done through instead of directly modifying the state itself. For example, when the state is updated, it needs to be executed instead of directly modifying it .setStatestate: { count: 0, list: [] }setState({ count: 1 })state.count = 1
The advantage of doing this is that it is easy to track state changes, making the code clearer and easier to maintain; the second is that because a new state object is generated for each update, it can avoid the problem of JavaScript object references, and thus avoid all kinds of weirdness. bug.
Similarities and differences between Vue and React
When writing React, you will feel that the above three principles are nothing special, and everything should be like this! It wasn't until I wrote Vue that I noticed some differences, although React and Vue essentially do the same thing. Look at them one by one below.
two-way data binding
As mentioned earlier, React is a one-way data flow. When writing a form, you need to bind values to, and manually listen for events to update the state:
import { useState } from 'react';
const App = () => {
const [input, setInput] = useState('');
const handleInputChange = (event) => {
setInput(event.target.value);
};
return (
<form>
<input value={input} onChange={handleInputChange} />
</form>
);
};
In Vue it is much simpler:
<template>
<form>
<input v-model="input" />
</form>
</template>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const input = ref('');
return {
input,
};
},
});
</script>
Since Vue provides this API, we can omit the step of writing events, which can save a lot of time and code when there are many forms. However, it is essentially a syntactic sugar. You can also manually bind values and listen for events like React. For some special scenarios or when you need to do some other processing while updating form values, manual writing is still necessary.v-modelv-model
single source of truth
Whether it's React or Vue, a single source of truth is an important principle. However, Vue provides an API that can greatly facilitate our development. Take the Todo List as an example. The filtering of the completed list can be handed over to, and Vue will cache it to reduce unnecessary calculations and improve performance. .computedcomputed
variable data
Unlike React's immutable data, the state in Vue is mutable data, which may be the biggest difference between React and Vue. React updates the state through setState, Vue directly modifies the state, and then he listens for changes in the state in the content. Vue's approach has several benefits:
- Simple, easy for novices to use;
- The granularity of data monitoring is finer and coupled with the compile-time optimization of the template, it has better performance;
- The code is simple and not cumbersome, and the amount of code is small;
From a personal point of view, I don't think the above benefits are pain points and optional, but the problems they bring are big troubles:
- It is not intuitive, because assigning values to variables in JavaScript will not cause other reactions. For novices, although it is easy to get started, it also affects the learning and understanding of JavaScript itself;
- Data monitoring cannot be perfectly implemented. The data monitoring is implemented by using many restrictions, such as the inability to monitor the addition and deletion of properties, the inability to monitor array changes in some cases, and the after-hours API that increases the learning cost of users; Vue The data monitoring implemented by using in 3 requires the user not to forget to write it at all times. Although it can be automatically completed by some editor plug-ins, it should not exist in the first place, and at the same time, it does not need to be written in the template, resulting in inconsistent mental models;Object.defineProperty$setProxy.value.value
- Due to the object reference logic of JavaScript, mutable data may lead to some strange and difficult debugging bugs. For example, some values in the state refer to an external object. Vue will directly modify the object itself, which may lead to other references. There is a problem with where the object is located;