Original link please stamp:Why I Chose React Over Vue (By Steven Poulton)

The body of the

Did you notice that I used “chose” rather than “better than” in the title? This is my attempt to have a discussion based on personal “tendencies” (rather than beliefs), which is objectively better than trying to turn the discussion into another “battle” of framing factions. I don’t think the latter has any effect. React and Vue are superficially very similar. I have a project that uses both. They both use the virtual DOM, and they’re both view-focused JS libraries.

As a flexible HTML rendering tool, they are all solutions to the same problem. But I believe there is a simple definition (concept) difference that will show up throughout your development process:

React fully embraces Javascript, whereas Vue doesn’t.

The common mantra often heard among React users is “Javascript only,” which is very true. Vue seems to have a lot of unnecessary magic, which makes components harder to understand.

Such as:

• Templates:

A React component can simply be thought of as a function that returns elements (or at least a class that does so). This functional approach comes naturally to Javascript developers. Data in, element out. If you have a set of data, you can simply map them to a list of elements. If you want to exclude some of these items, you can use a filter of type Array and map the results to the specified element. This functional workflow perfectly mirrors your understanding of the rest of the application. This approach complements the strengths of Javascript.

A Vue component is more like a template that can reference data in a data structure. It includes a DSL (Domain Specific Languag), which is secondary but completely unnecessary. I don’t need v-for because I have native map(). I don’t need the V-if, because I have the well-worn regular if. Templates introduce at least some level of cognitive load, which is limited or unhelpful.

Templates also introduce the issue of scope. If I import some static data into my React component, I can use it in my render function because all the standard JavaScript scope rules apply. It’s just a function, exactly like any other function. The Vue template operates in a separate scope from JavaScript, so you must first merge the static data into the Vue component and return it as a calculated field. None of this is particularly painful, but it’s unnecessary.

• Tooling

React is “Just Javascript,” so in my experience the development experience is much better. For example, prettier-js (a code formatter) only works for JSX, but conflicts with embedded expressions in a Vue template, because a Vue template is not “Just Javascript”. In addition, because templates and Javascript run in different scopes, it is impossible for a Linter to detect missing or misspelled variables in templates (at least for now). This is another slight irritation, but it’s not necessary.

• Biggest loser: Variable state

React and Redux with immutable core. In the same way, the React render function is a reducer that converts props to elements, and the React state change is just a function that degrades the old state and operations to the new state.

However, Vue (and Vuex) have reactive state, which means you can change the state in a coercive way. This is incompatible with the style of functionality used elsewhere in Javascript.

I’m very used to immutable data structures and they make me feel very secure. Because of all the getters/setters Vuex adds to the Store, Vuex almost forces you not to use them.

In React/Redux, the state/store is “just Javascript objects”.

BTW, pick up a little extra stuff