Where is the difference between Vue and react?

This chapter brings you the difference between Vue and react? Have a certain reference value, the need for friends can refer to, I hope to help you.

First, the monitoring data changes in the implementation of different principles

Vue is able to accurately understand data changes by Getter/setter and the hijacking of some functions, without the need for special optimizations to achieve good performance.
React default is done by comparing references, if not optimized (purecomponent/shouldcomponentupdate) can result in a lot of unnecessary vdom re-rendering.

Why does React not accurately monitor data changes? This is because of the difference between Vue and React design concepts, VUE uses variable data, and React emphasizes the immutable data. So there's no good or bad, Vue is simpler, and react is more robust when it comes to building large applications. Because there is usually a data layer framework such as VUEX and Redux, so this part does not explain too much, in the final Vuex and Redux differences will also be mentioned.

Ii. Differences in Data flow

We all know that the default in Vue is to support two-way binding. In Vue1.0, we can implement two kinds of bidirectional binding:
1. Between parent and child components, props can be bound in two directions
2. Two-way binding between component and Dom via V-model

The first is removed in the vue2.x, that is, the parent-child component cannot be bound in two directions (but provides a syntactic sugar that automatically helps you modify it through the event), and vue2.x has discouraged the component from making any changes to its props. So now we only have a two-way binding between components <--> DOM.
However React from the birth of the two-way binding is not supported, React has been advocating a one-way data flow, he called onchange/setstate () mode.
However, since we generally use the state management framework of unidirectional data streams such as Vuex and Redux, there are many times when we do not feel the difference.

Iii. HoC and Mixins

The way we combine different functions in Vue is through mixin, while in react we pass the HoC (higher-order component).

React The earliest also use mixins, but later they think this way to component intrusion too strong will cause many problems, abandoned the Mixinx to use the HoC, about mixin where is not good, can refer to React official this article mixins considered Harmful, and Vue has always been implemented using Mixin.

Why does Vue not use the HoC way to achieve it?

Higher-order components are essentially higher-order functions, and React components are purely functions, so higher-order functions are very simple for React.

But Vue is not going to do that. The component in Vue is a wrapped function, not simply the object or function that we passed in when we defined the component. For example, how does the template we define be compiled? Like how did the props of the statement receive it? These are the implicit things that Vue did when it created the component instance. Because Vue silently helped us do so much, so we ourselves if we just wrap the component's declaration and return a higher-order component, the packaged component will not work properly.

Iv. Differences in Component communication

There are three ways to implement component communication in Vue:
1. The parent component passes data or callbacks to subcomponents through props, although callbacks can be passed, but we typically only pass data, and the event's mechanism is used to handle the child component's communication to the parent component.
2. Subcomponents send messages to parent components through events
3. The new Provide/inject in V2.2.0 enables the parent component to inject data into the subassembly, spanning multiple levels.

There are some other ways such as visiting $parent/$children and so on are dirty.

In React, there are two corresponding ways:
1. Parent component can pass data or callbacks to subcomponents via props
2. Cross-level communication can be done through the context, which in fact has the same effect as provide/inject.

As you can see, the React itself does not support custom events, and the Vue neutron component passes messages to the parent component in two ways: events and callback functions, and Vue prefers to use events. But in React we all use callback functions, which is probably the biggest difference between them.

Five, the template rendering method of different

On the surface, the syntax of the template is different

React is a rendering template through jsx;
Vue is rendered through an expanded HTML syntax.

But in fact this is only superficial phenomenon, after all, react does not have to rely on JSX.

In the deep, the principle of the template is different, this is their essential difference:

React is in the component JS code, through the native JS implementation of the template common syntax, such as interpolation, conditions, loops, etc., are through the JS syntax to achieve;
Vue is in a separate template from the component JS code, which is implemented by directives, such as conditional statements that need to be v-if.

In this regard, I personally prefer the practice of react, because he is more purely original, and Vue's approach is somewhat unique, will make HTML messy. For example, illustrate the benefits of react:

The render function in react supports the closure feature, so our import component can be called directly in render. However, in Vue, since the data used in the template must be hung on this one for a transit, it is clear that after we import a component, we need to re-declare it in components, which is obviously strange but it has to be done.

Vi. the differences between Vuex and Redux

On the surface, there are some differences between store injection and how to use it.

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

Submit updates using dispatch and commit;
The data is read through mapstate or directly through the $store.

In Redux, each of our components needs to be displayed using connect to connect the required props and dispatch. In addition, Vuex is more flexible, the components can be dispatch action can also commit updates, and Redux can only be dispatch, and can not directly invoke reducer for modification.

From the principle of implementation, the biggest difference is two points:
1.Redux uses immutable data, and Vuex's data is mutable. Redux replaces the old state with the new state each time, and Vuex is modified directly
2.Redux in the detection of data changes, is by diff way to compare differences, and Vuex in fact, and Vue principle is the same, is through the getter/setter to compare (if you see Vuex source will know, in fact, he directly created a Vue instance to track data changes)

The difference between these two points is actually because of the difference between React and Vue's design philosophy. React is more inclined to build stable and large-scale applications, and is very well-structured. In contrast, Vue is more inclined to solve problems quickly and easily, more flexible and less disciplined. So it will also give people a large-scale project with react, a small project with Vue feeling.