This article will document some of my reflections on the differences between Vue and React, not only in their own right, but also with tools such as Vuex/Redux that are often used together. Because it involves a lot of content, maybe each point below can be written into an article, this time to make a brief summary, when I have time to do a detailed topic.

The implementation principle of monitoring data changes is different

  • Vue throughgetter/setterAnd some function hijacking, can know exactly how the data changes, no special optimization can achieve good performance
  • React the default was conducted by means of comparative reference, if not optimal (PureComponent/shouldComponentUpdate) may lead to a lot of unnecessary VDOM to render

Why doesn’t React accurately listen for data changes? This is due to the conceptual difference between Vue and React. Vue uses mutable data, while React emphasizes immutable data. So there’s no good or bad, Vue is simpler, React is more robust when building large applications.

Since a data layer framework such as Vuex and Redux is usually used, this part will not be explained too much, and will be covered in the final distinction between Vuex and Redux.

Differences in data flow

You all know that bidirectional binding is supported by default in Vue. In Vue1.0 we can implement two types of bidirectional binding:

  1. Between parent and child components,propsIt can be bidirectional binding
  2. A component can pass through the DOMv-modelTwo-way binding

Vue2. X has removed the first one, which is that parent and child components can’t be bidirectionally bound between them (but it does provide a syntax sugar to automatically help you with events), and Vue2. X has discouraged components from making any modifications to their props. So now we only have bidirectional binding between components <–> DOM.

However, React did not support two-way binding from its inception. Instead, React advocated one-way data flow, which he called onChange/setState() mode.

However, since we use state management frameworks for one-way data flows such as Vuex and Redux, the difference is often lost.

HoC and mixins

In Vue we combine different functions through mixins, while in React we combine functions through HoC (higher-order components).

React was also the first to use mixins, but later they decided that this way was too intrusive into components and would cause many problems, so they abandoned Mixinx and switched to HoC. For details on what is wrong with mixins, please refer to the article Mixins Considered Harmful.

Vue has always been implemented using mixins.

Why doesn’t Vue implement HoC?

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

Vue, however, is a wrapped function, not simply an object or function passed in when we define the component. For example, how does the template we defined get compiled? For example, how does the declared props receive this? This is what VUE does implicitly when it creates component instances. Since VUE does so much for us, if we wrapped the component declaration ourselves and returned a higher-order component, the wrapped component would not work.

Recommend a great article on how to implement high-order components in VUE explore high-order components in VUE

Component communication differences

Actually, this part is very similar.

There are three ways to implement component communication in Vue:

  • The parent component passespropsPassing data or callbacks to child components, although callbacks can be passed, we typically only pass data and handle the child’s communication to its parent through the mechanism of events
  • Child components send messages to parent components via events
  • throughV2.2.0In the newprovide/injectTo enable the parent component to inject data into the child component, which can span multiple levels.

There are some dirty ways to access $parent/$children that are not covered here.

React works in three ways:

  • The parent component passespropsYou can pass data or callbacks to child components
  • Can be achieved bycontextTo communicate across hierarchiesprovide/injectThe effect is similar.

As you can see, React itself does not support custom events. There are two ways for a Vue subcomponent to pass messages to its parent: events and callback functions, and Vue prefers to use events. However, in React we both use callback functions, which is probably the biggest difference between them.

The template renders differently

On the surface, the template syntax is different

  • React renders templates via JSX
  • Vue renders with an extended HTML syntax

However, this is only superficial, after all React doesn’t have to rely on JSX. At a deeper level, templates work differently, and this is the essential difference:

  • React is implemented in component JS code, using native JS templates to implement common syntax, such as interpolation, conditions, loops, etc., using JS syntax
  • Vue is implemented using directives, such as conditional statements, in a separate template from component JS codev-ifTo implement the

Personally, I like React because it’s more pure and native, whereas Vue’s approach is a bit more idiot-like and clutters up the HTML. Here’s an example of the benefits of React:

The Render function in React supports closures, so the components we import can be called directly in Render. In Vue, however, since the data used in the template must hang on this for a transit, it is obviously strange but necessary to import a component and declare it in components after importing it.

Difference between Vuex and Redux

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

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

  • usedispatch 和 commitSubmit the updates
  • throughmapStateOr directly throughthis.$storeTo read the data

In Redux, we wanted each component to display the props and dispatch with connect.

In addition, Vuex is more flexible. Components can dispatch actions and commit updates, while Redux can only dispatch and cannot directly call Reducer for modification.

In terms of implementation principles, the biggest differences are two:

  • Redux uses immutable data, whereas Vuex’s data is mutable. Redux replaces the old state with the new state each time, whereas Vuex is a direct modification
  • When Redux detects changes in data, it compares differences through diff, while Vuex is actually based on the same principle as Vuegetter/setter(If you look at the Vuex source code, you will know that it actually creates an instance of Vue internally to track data changes)

The difference between React and Vue is actually due to the difference in design philosophy. React tends to build large, stable applications, and is very disciplined. Vue, by contrast, is more of a quick fix, more flexible, and less rigid. Hence, React is used for large projects and Vue is used for small projects. the