react with vue contrast

Recently the company intends to develop a new project, discussed what kind of framework to use for development, and then I wanted to write such a sudden article react to compare the advantages and disadvantages and vue, while there are a lot of companies will be asked during the interview compare the advantages and disadvantages of vue react and, I hope this article will help people in need.
First, explain why the company does not choose this angular frame, first, because relative to other two frameworks, anguar difficulty of using a little big, what dependency injection, providers, etc. These things make people feel more angular deflection in the background.
Then because of angular typescript using such language, the front company will use this language is not much, let alone mastered. Followed by the document, the domestic users need over the wall to access his official documents.
Now I say about those vue react and the advantages and disadvantages, and here I do not mean like a virtual DOM can be found online these things a lot, because it was no need to repeat create the wheel, we have seen something to write down is pointless, here I prefer some of the details of the contrast problem.

vue using .vue file, react using a .js file or .jsx

.vue document of the three-tier structure, namely template, script, style. template is responsible for writing the html, script is responsible for writing the js, style is responsible for writing the css. This three-tiered structure is very clear, each responsible for different content, making html, js, css coupling is not high.
.js or .jsx is es6 use of grammar class. html, js, css mixed together need to write, so html, js, css relatively high degree of coupling.
So contrast, .vue file will be better than .js or .jsx file.

html template

First it should be noted here that the real html html does not mean, here and say this is because react vue similar template with html, but also easy to understand for everyone, but many people like the Internet also said to be html.
In vue in, html is written in the template may be used v-if, v-for other commands in the template, using the variables in the instruction is not required {{}} directly used in a single or double quotes on the line a, it is necessary to use an outer {} {} instruction. Most importantly, vue templates and js are completely separate, when you render an array, you do not rely totally js, you only need to use the command v-for.
In the react, html syntax specification long as it is in line with jsx you can write anywhere, it will be more freedom compared vue, but you can not use the same instruction such as v-for vue, which means that when you want to render an array of when you need to use js syntax to traverse the array, and then render the corresponding html. If you use when a variable, you are going to use for wrapping the {}. And some keywords not appear in html, such as class, you have to write className.
Therefore, the use of templates in html, vue relatively react a bit better. Html and js vue because of relatively low degree of coupling.

css aspects

In the vue, css is written in the style of. style has a property called scoped, his role is to css style modular, meaning that wrap styles style tag is only valid in the current file, without affecting the external style, css produce global pollution, which for the preparation of a component vue It is very helpful, because we do not want in the style of the components have an impact on external components. When you need to use less css or sass of this pre-language, you only need to download the corresponding loader, then add in the style tag lang = "less" or lang = "sass", or you can easily use less sass, no need to to modify the configuration (of course, the premise of this approach is based on the items you created with scaffolding vue, and if you build a project environment, you still need to manually modify the configuration).
In react, you want to use css There are two ways, one is written in the style of the line, the second is to create a css file and it imported. The first is to use inline styles, his disadvantage is caused by bloated html, when you need to add more style to the li element when it is light and easy met, but also increases the file size is not conducive to optimizing the performance of front-end. Then create a css file and it imported. This method will produce a global css pollution, when you want to write a component of the time, this approach is obviously not desirable. Of course, you can use webpack build tools using css css-loader will be modular, in this area you will need a little webpack knowledge, this is for people who are not familiar with the webpack apparent undesirable.
So in terms of css, vue superior

Components of respect

Components of a start is made to react, even though the writing mode coupling react relatively high, but it uses the wording es6 class, which for some front-end or back-end transfer students like object-oriented programming, it may be easier to accept and in succession components, react only need to use the keyword extends easily to inherit, and create higher-order components will be more than when vue easily, easier to understand.
vue in the beginning emerge that does not support component-based, but slowly behind the support component of this function, when an inherited component, vue need vue.extend () get an instance of inheritance, and through the new keyword It can be used, which is very useful for the preparation of functional components.
So in terms of component-based, I think it would be better react, component is the core concept react, there is no component of no react.

Terms of the data stream

Vue default is to support two-way data flow, that change will affect the view of the data model, data model changes will affect the view, while vue components also support two-way data flow binding. But this makes data management becomes more complicated.
Reatc only supports one-way data flow, if you want to achieve bi-directional data flow you have to manually go to achieve one of the core concepts of one-way data flow also react in this way data flow can easily observe the flow of data, so that data management becomes very convenient
in traffic, I prefer the way data flow, because of the one-way flow of data will be very clear where to go

State management

vue using vuex, vuex writing is not only convenient, but also provides various methods such vuex use vuex also becomes easy. But vuex writing is not strict, you can go beyond the mutations modify his state, even though this is not desirable, vuex also reported a warning, but does not affect you to modify the state vuex outside of mutations, this will make you do not know when and where to modify the state of vuex.
react using redux, redux need all kinds of reducer, action can change the state, redux writing very strict, you can only go to modify redux state by dispatch, redux every step must abide by its rules, otherwise you will not be modified its status. You will be able to very clearly know where you are and at what time to modify the state of redux.
For state management, I prefer is rigorous redux

other aspects

Vue framework itself also provides many useful features and good api, such as animation, keep-alive components, etc., which allows you to develop more flexible and concise, and vue official document for the country people are very friendly .
And react relatively vue is not so versatile, because react more focused is the view layer, and there is nothing too fancy. You go in the official documentation react to look at the document you will find that what it was only a glance.

Eventually, the company chose to use this framework vue. But the technology selection is no right and wrong, only they fit, from your specific needs, choose the right framework to your development efficiency becomes faster.