This article is reproduced in: Ape 2048 Website ➞ https://www.mk2048.com/blog/blog.php?id=iah00hjkaa

This article records when I use Vue and React, and some thoughts about their differences, not only limited to their own, also including, for example Vuex/Reduxand so often with tools. Because a lot of content involved, each of the following points may be able to write an article, this time to briefly make a summary, so I have time to do a detailed thematic out.

The principle of different monitor data changes

By Vue getter/setterand hijacking of some functions, to accurately know the data changes, no particular optimization can achieve good performance
React default is cited by way of comparison, if not optimized (PureComponent / shouldComponentUpdate) may cause a lot of unnecessary re-rendering of VDOM

Why React imprecise monitor data changes? This is because the difference in Vue and React design, Vue using variable data, while React more emphasis on immutable data. So it should be said there is no good or bad, Vue easier, while React to build large applications when more robust.

Because usually by a frame such as a data layer Vuexand Redux, so this part will not be too much to explain, in the final vuex 和 redux的区别also mentioned in.

Different data streams

We all know Vue default is to support two-way binding. In Vue1.0 we can implement two-way binding:

Between father and son components, propscan bind two-way
DOM can be between the component and v-modeltwo-way binding

In Vue2.x removed in the first, between father and son is a two-way binding component can not (but provides a syntactic sugar for you automatically modify the way through the event), and Vue2.x no longer encourage their components the props to make any changes. So now we only have 组件 <--> DOMbetween two-way binding this one.

However React not support two-way binding from the beginning of the birth, React been advocating a one-way data flow, he called onChange/setState()mode.

However, because we usually use Vuexand Reduxstate management frameworks-way data flow, so many times we feel this is the difference.

HoC and mixins

Vue way we combine different functions by mixin, but we in React by HoC (high-order components).

React earliest use mixins, but then they feel this way too invasive component can cause a lot of problems, it is abandoned in favor of the use of mixinx HoC, mixin about where exactly bad, you can see this article Mixins Considered Harmful.

The Vue has been to use mixin to achieve.

Why not use HoC Vue way to achieve it?

Higher-order component is essentially a higher-order functions, React component is a pure function, so the higher-order functions of the React is very simple.

But to die Vue, Vue is a component in the wrapped function that is not simple is defining component when we passed the object or function. For example, how we define templates are compiled? For example, how props statement received? These are vue create a component instance when the implicit do. Since vue quietly help us to do so many things, so if we own statement directly to the assembly of packaged, return to a higher-order component, then this is the package of components will not work properly.

Recommended a great article talking about how to achieve high-order components vue explore Vue higher-order components

Difference component in communication

In fact, quite similar to this part of the two.

There are three ways to implement the components of the communication in Vue:

Parent component by propspassing data to the callback or sub-components, although you can pass a callback, but we generally only pass data, and to deal with sub-assembly components through to the parent communication mechanism event
Subassemblies to send a message to the parent component by event
By V2.2.0the new provide/injectachieved inject data into the parent component sub-assembly, you may span multiple levels.

In addition there are some such as access to $parent/$childrenrelatively dirty way and so will not talk about here.

In React, there are three ways corresponding to:

By parent component propscan pass the callback data to the sub-assembly or
By contextcross-level communication, and this is actually provide/injectthe role of the same.

You can see, React itself does not support custom events, Vue neutron component is passed to the parent component message in two ways: events and callbacks, and more inclined to use Vue event. But we are in the React using the callback function, which may be the biggest difference between them both.

Rendering of different templates

On the surface, the different template syntax

React template is rendered by JSX
The Vue is rendered by an extension of HTML syntax

But in fact this is only superficial, after all, does not have to rely React JSX. In the deep, different principles of the template, this is the essential difference between them:

React JS code in the assembly, the native JS achieve common syntax template through, such as interpolation, conditions, loops, are achieved by JS syntax
Vue is a separate component and separating the template JS code, implemented by instructions, such as conditional statements need v-ifto achieve

On this point, I personally prefer React practice, because he is more pure more original, and somewhat unique approach Vue, HTML will mess up. For example, illustrate the benefits of React:

react in the render function is to support the closure properties, so we import components can be called directly in the render. But in the Vue, because the data used in the template must be hung thison transit once, so we importthen finished a component, but also in the componentscase of the restatement, which is obviously very strange but had such a practice.

The difference Vuex and Redux

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

In the Vuex, $storeis directly injected into a component instance, it can be more flexible to use:

Use dispatchand commitsubmit updates
By mapStateor directly through the this.$storeread data

In Redux, we need to show every component with connectthe needs of propsand dispatchconnected.

In addition Vuex more flexible, component either dispatchaction can also be commitupdates, and Redux can only be dispatch, and can not be modified directly call reducer.

From the realization of principles, the biggest difference is two things:

Redux using immutable data, and the data is variable Vuex. Redux each time to replace the old with the new state of the state, and directly modify Vuex
Redux detecting data changes when the diff is by way of difference, but in fact Vuex and principles of the Vue, is by getter/settercomparing the (If you do Vuex source code will know, in fact, he created a direct internal Vue instance used to track data changes)

The difference between these two, in fact, because the difference in design philosophy React and the Vue. React more biased in favor of large-scale applications to build stable, very of Coban. In contrast, Vue prefer to simply and quickly solve the problem, more flexible, less strictly follow the old rules. So also giving a large-scale project with React, small-scale projects with a feeling of Vue. of

Some notes about Vue and the difference React