What is the difference between Vue and React?

This chapter will tell you what is the difference between Vue and React? It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. The implementation principles of monitoring data changes are different

Vue can accurately know data changes through getter/setter and the hijacking of some functions. No special optimization is required to achieve good performance.
React performs this by comparing references by default. If it is not optimized (PureComponent/shouldComponentUpdate), it may lead to a large number of unnecessary VDOM re-rendering.

Why doesn’t React accurately monitor data changes? This is because of the difference in design concepts between Vue and React. Vue uses mutable data, while React emphasizes the immutability of data. So it should be said that there is no difference between good and bad. Vue is simpler, while React is more robust when building large applications. Because a data layer framework such as Vuex and Redux is generally used, this part will not be explained too much. It will also be discussed in the final difference between vuex and redux.

2. Differences in data flow

Everyone knows that Vue supports two-way binding by default of. In Vue1.0 we can implement two two-way binding:
1. Between parent and child components, props can be bound in two directions
2. Two-way binding between components and DOM can be done through v-model

The first type is removed in Vue2.x, that is, two-way binding between parent and child components is no longer possible (but a syntax sugar is provided Automatically help you modify it through events), and Vue2.x no longer encourages components to make any modifications to their own props. So now we only have two-way binding between components DOM.
However, React has not supported two-way binding since its birth. React has always advocated one-way data flow, which he calls the onChange/setState() mode.
However, since we generally use one-way data flow state management frameworks such as Vuex and Redux, many times we cannot feel this difference.

3. HoC and mixins

The way we combine different functions in Vue is through mixins, while in React we use HoC ( higher-order components).

React also used mixins at first, but later they felt that this method was too intrusive on components and would cause many problems, so they abandoned mixinx and switched to HoC. For what is bad about mixin, you can refer to React The official article Mixins Considered Harmful, and Vue has always been implemented using mixins.

Why doesn’t Vue use HoC to implement it?

High-order components are essentially high-order functions. React’s component is a pure function, so high-order functions are very simple for React.

But that doesn’t work for Vue. A component in Vue is a wrapped function. It is not simply the object or function we pass in when we define the component. For example, how are the templates we defined compiled? For example, how do you receive the declared props? These are all things Vue does implicitly when it creates a component instance. Since Vue has done so many things for us silently, if we directly wrap the component declaration and return a higher-order component, then the wrapped component will not work properly.

4. The difference between component communication

There are three ways to achieve component communication in Vue:
1. The parent component passes data or callbacks to the child component through props. Although callbacks can be passed, we generally only pass data, and the communication from the child component to the parent component is handled through the event mechanism
2. The child component sends messages to the parent component through events
3. Through the new provide/inject in V2.2.0, the parent component can inject data into the child component, which can span multiple levels.

There are other dirty ways such as accessing $parent/$children, which I won’t go into here.

In React, there are two corresponding methods:
1. The parent component can pass data or callback to the child component through props
2. Cross-level communication can be carried out through context, which is actually similar to provide/inject.

As you can see, React itself does not support custom events. There are two ways for sub-components in Vue to transmit messages to parent components: events and callback functions, and Vue prefers to use events. But in React we all use callback functions, which may be the biggest difference between them.

5. Differences in template rendering methods

On the surface, the template syntax is different

React is rendered through JSX Template;
Vue is rendered through an extended HTML syntax.

But in fact, this is just a superficial phenomenon. After all, React does not have to rely on JSX.

At a deep level, the principles of templates are different. This is their essential difference:

React implements common syntax in templates through native JS in the component JS code, such as interpolation. Conditions, loops, etc. are all implemented through JS syntax;
Vue is implemented through instructions in a separate template separated from the component JS code. For example, conditional statements require v-if to be implemented.

Regarding this point, I personally prefer React’s approach because it is purer and more native, while Vue’s approach seems a bit unique and will mess up HTML. For example, to illustrate the benefits of React:

The render function in react supports closure features, so the components we import can be called directly in render. But in Vue, since the data used in the template must be hung on this for transfer, after we import a component, we need to declare it in components again. This is obviously strange but has to be done. .

6. The difference between Vuex and Redux

On the surface, there are some differences in store injection and usage.

In Vuex, $store is directly injected into the component instance, so it can be used more flexibly:

Use dispatch and commit to submit updates;
Through mapState or directly through this. $store to read data.

In Redux, each of our components needs to explicitly use connect to connect the required props and dispatch. In addition, Vuex is more flexible. You can dispatch actions and commit updates in components, while Redux can only dispatch and cannot directly call reducer for modification.

In terms of implementation principles, the biggest difference is two points:
1.Redux uses immutable data, while Vuex’s data is mutable. Redux replaces the old state with new state every time, while Vuex modifies it directly
2. When Redux detects data changes, it compares differences through diff, while Vuex actually uses the same principle as Vue, and compares through getters/setters (if you look at the Vuex source code, you will know that it actually directly creates a Vue instances are used to track data changes)

The difference between these two points is actually due to the difference in the design concepts of React and Vue. React prefers to build stable and large-scale applications, which is very professional. In contrast, Vue prefers to solve problems simply and quickly, is more flexible, and does not strictly follow rules and regulations. Therefore, it will also give people the feeling of using React for large projects and Vue for small projects.

The above is the detailed content of What is the difference between Vue and React?. For more information, please follow other related articles on the PHP Chinese website!