The implementation principle of monitoring data changes is different

  • Vue hijacks getters/setters and functions to know exactly what’s going on in the data and to achieve good performance without special optimizations

  • 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 monitor data accurately? This is because of the difference in design philosophy between Vue and React. Vue uses variable data, while React emphasizes immutable data. So there’s no such thing as good or bad, Vue is simpler and React is more robust when building large applications.

Since there is usually a data layer framework such as Vuex and Redux, this part will not be explained too much, and the difference between Vuex and Redux will be discussed in the end.

Different data flows

It is well known that Vue supports bidirectional binding by default. In Vue1.0 we can implement two bidirectional bindings:

  1. Props can be bi-directional bound between parent and child components

  2. Components can be bi-directional bound to the DOM via v-Model

In Vue2. X, we removed the first option, which means that parent components can no longer be bound to each other (but there is a syntax sugar that automatically helps you change them by means of events), and Vue2. So now we only have bidirectional binding between components <–> DOM.

However, React has never supported two-way binding since its birth. React has always advocated a one-way data stream, which he calls the onChange/setState() pattern.

But since we tend to use state management frameworks for one-way data flows such as Vuex and Redux, many times we don’t feel the difference.

HoC and mixins

The way we combine different functions in Vue is through mixins, whereas in React we combine them through HoC (high order components).

React originally used mixins, but they decided that it was too intrusive and would cause a lot of problems, so they dropped Mixinx and used HoC instead. What’s wrong with mixins? Mixins Considered Harmful in the React official article

Vue has always been implemented using mixins.

Why doesn’t Vue implement it in a HoC way?

Higher order components are essentially higher order functions. React components are pure functions, so higher order functions are very simple for React.

A component in Vue 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 compile? For example, how did I receive the props? This is what Vue does implicitly when it creates a component instance. Because vue does so much for us, if we wrap a component declaration and return a higher-order component, the wrapped component won’t work.

What is a great article about how to implement high order components in VUE

Component communication differences

This is actually a little bit similar.

There are three ways to communicate components in Vue:

  • The parent component uses props to pass data or a callback to the child component. Although we can pass the callback, we usually only pass data, and we handle the communication between the child component and the parent through the event mechanism

  • The child component sends messages to the parent through events

  • The provide/ Inject feature in V2.2.0 allows the parent component to inject data into the child component, which spans multiple layers.

In addition, there are some such as access to the parent/parent/parent/children more dirty here did not speak.

In React, there are also three ways to React:

  • The parent component uses props to pass data or callbacks to the child component

  • Context can be used to communicate across layers, which is essentially what provide/ Inject does.

As you can see, React itself does not support custom events. Vue has two ways of passing messages to its parent: events and callbacks, and Vue prefers to use events. But in React we all use callbacks, and that’s probably the biggest difference between them.

Differences in how templates are rendered

On the surface, templates have different syntax

  • React is rendered using a JSX rendering template

  • Vue is rendered using an extended HTML syntax

But that’s just a facade, because React doesn’t have to rely on JSX.

At a deeper level, templates differ in principle, and this is their essential difference:

  • React is in component JS code, using native JS to implement common syntax in templates, such as interpolation, conditions, loops, etc., all implemented through JS syntax

  • Vue is implemented in a separate template from the component’s JS code through instructions, such as conditional statements that require V-if

At this point, I personally prefer React because it’s more pure and native, whereas Vue’s approach is a bit unique and can mess up HTML. Here’s an example of the benefit of React:

The React render function supports closures, so components we import can be called directly in Render. However, in Vue, since the data used in the template must be hung on this for a transit, we need to import a component and then declare it in components, which is obviously strange but necessary.

The 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:

  • Commit updates using Dispatch and COMMIT

  • Use mapState or this.$store directly to read data

In Redux, we need to connect the props and dispatch that we need with connect for each component.

In addition, Vuex is more flexible. Components can dispatch action 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:

  • While Redux uses immutable data, Vuex’s data is mutable. Redux replaces the old state with a new one each time, whereas Vuex is a direct modification

  • When detecting changes in data, Redux uses diff method to compare the differences, while Vuex actually uses getter/setter method to compare the differences (if you look at Vuex source code, in fact, it creates an internal instance of Vue to track changes in data).

The difference between these two points is actually due to the difference between the design concept of React and Vue. React is more about building stable, large applications, and it’s very disciplined. In contrast, Vue tends to solve problems simply and quickly, is more flexible, and does not follow rules strictly. Therefore, it gives people the impression that React is used for large projects and Vue is used for small projects.

First of all, make an advertisement to your friends, the circle and the upcoming circle of big guys all understand, a class and various platforms such as Geek,Kaikeba and other low price resources, package update, in the hands of the first-line development buddy, at the same time for the upcoming candidates have interview guidance technology refers to the service, plus he sa!