DEV Community

React vs Vue: Compare and Contrast

Ben Halpern on May 25, 2020

Neither ReactJS or VueJS are overly novel anymore. With lots of time to establish identities, can we have a discussion about what fundamentally differentiates these popular JavaScript approaches?

Feel free to debate, but keep it respectful. 😇

Ryan Smith • May 25 '20 • Edited

Here's my take on it:

React

Aims to be a library concerned with rendering UI and it stays true to that purpose. It is unopinionated on how to build apps.
In most use cases, having just a library for rendering UI is not enough, so other packages are typically added (create-react-app with routing, CSS-in-JS, state management, etc.) to improve the experience. With the add-ons, a React app becomes more framework-like.
Templating is done with JSX which are HTML-like elements plus standard JavaScript to create conditionals or loops.

const todoItems = todos.map((todo, index) =>
  <li key={index}>
    {todo.text}
  </li>
);

Less domain-specific language as most constructs use standard JavaScript. This can steepen the learning curve but will help improve JavaScript language skills.

Vue

Its purpose is also to render UI, but it has added convenience as official parts of the ecosystem (Vue CLI, Vuex, Vue Router). It is not necessarily opinionated or rigid, but it gives more guidance and convenience to build apps.
By default, Vue components are separated into a template, scripts, and styles to separate concerns.
The templates use directives, which are custom Vue attributes added to HTML elements to output dynamic content that requires an if-statement, loops, etc.

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

More domain-specific language to learn, which can lessen the learning curve but you may not pick up as much JavaScript knowledge.

John Peters • May 26 '20

I think react is opinionated. (Jsx and redux, top down data passing, hooks) However it doesn't hijack JavaScript.

Mike Talbot ⭐ • May 26 '20

I do see that differently:

JSX is sugar over basic JS, it compiles to produce a javascript function that is fast to run. "v-for=" is not. It's being interpreted at run time I believe (feel free to correct me on that, not a Vue expert, tried it for a prototype and felt it was too "other").
I certainly use Hooks (it's a method) but not Redux (don't like it). I use hooks to do lower down binding and reinterpretation of refreshes, because that's my style and it works for me. So I guess React might have an opinion but is isn't forcing it on me :)

John Peters • May 26 '20

First time I saw Jsx I thought it was the coolest thing since chewing gum! I like it actually.

Hooks tie into their state stuff, I don't like react's state stuff. Why? Because I don't see the advantage of farming off state to another thing. Internal variables to the component or even observables are closer to the metal in my opinion. In fact, an Observable could easily mimic the React state stuff. Right?

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Mike Talbot ⭐ • May 26 '20 • Edited

Yeah it's the diffing/refreshing algorithm. See I don't farm it off much - only perhaps when it's a local thing that isn't part of the real application state. So imagine my app is editing documents, I'd use useState to capture the rename of something, in a dialog, in case the user cancels. The rest of the time my React looks like this:

    return <Bound target={someRoot} refresh={refresh}>
        <BoundTextField field="name"/>
        <BoundTextField field="age" transformOut={convertToMinMaxNumber(0, 100)}/>
        <BoundAutocomplete options={choices} field="mode" label="Choose your mode"/>
    </Bound>

Those BoundXYZ things come from a neat little wrapper that interprets the specific components value and events - a one liner
for all of the MaterialUI components I use and the ability to return to
the core if I need it.

Refresh up there is basically an internal trigger using a useState() hook to trigger rendering and perform other actions.

John Peters • May 26 '20

What's your thoughts on this? I haven't tried it in React , but this is how I do it in Angular. Angular automatically detects changes to bound elements.

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  let count = 0;
  onCountClicked =()=>{
  count++;
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => onCountClicked()}>
        Click me
      </button>
    </div>
  );
}

Mike Talbot ⭐ • May 26 '20

Yeah I've always liked Angular. We didn't choose it for our current project because we found it hard to "late load" unknown classes for injection into a template - which is a very specific requirement.

If I were to put the point for React it would be that its fairly explicit about what it's doing - it's very mechanical and low level - though having looked at an article of Fiber recently - I guess it isn't THAT low level.

I need something to feel like bound data to be happy, so I make my own. I dislike Redux because your logic is in a huge pile somewhere else. That never worked for the way I reason out problems.

Sergio Daniel Xalambrí • May 26 '20

Redux is not part of React, and is not even recommended in the website, neither it's recommended by the team.

But yeah, React has some opinions on how to build UIs, that includes how to define the UI (JSX) and how to control the state of your UI (top down data passing, useState/useReducer) and how to run effects. Nevertheless, aside of that it's completely un opinionated, it doesn't care how you style your components, how you fetch data, how you manager routes, not even how you animate, that is why there are libs for those things instead of being part of React itself.

John Peters • May 26 '20

When I first learned the top down data model and state stuff, I didn't like react. Then I found they altered Css and renamed tags like link.

Aarón García Hervás • Jun 4 '20

What do you mean by "they altered CSS"?

John Peters • Jun 4 '20 • Edited

render() {
  let className = 'menu';
  if (this.props.isActive) {
    className += ' menu-active';
  }
  return <span className={className}>Menu</span>
}

Instead of this:

   //where the style sheet is contains the className style 
  <span class="className">Menu</span>

When I first read about this many years ago I did not like it. I didn't understand it at the time.

Aarón García Hervás • Jun 5 '20

I'd say that's "altered HTML" (JSX), but no CSS has been altered, right?

Sean Allin Newell • May 25 '20 • Edited

I love Vue, it has a special place in my heart since I was weaned on KnockoutJS and MVVM. Data bind syntax in dom nodes make a lot of sense to me.

I've done more professional react dev over the past 3 yrs, but I can say they both offer very similar or identical features.

React is very FB, and Vue is very OSS, but it's worth pointing out that both ecosystems have a healthy amount of corporate sponsorship and OSS activity.

Vue pushes the single file component paradigm a lot, but you dont have to do it. React pushes the hook based state management, but you don't have to do it.

In conclusion, they are identical twin brothers who grew up in different countries. Who you will want to date or marry largely depends on your first date experience.

Laurie • May 25 '20 • Edited

The biggest difference to me is the decisive opinions on state and routing that Vue made and React did not.

With Vuex and Vue router, there is an expected bundling of tools for creating a Vue app. This makes it more approachable for beginners.

React is incredibly configurable, but that can be intimidating for those that aren't comfortable architecting a full frontend application.

I'll also add that I'm a big fan of the breakdown of a Vue component. They took the angular style of 3 files and collapsed it into one. Data, display, styles.

React, again, is much more open to interpretation on best practices in component structure.

fullstackcodr • May 25 '20 • Edited

A lot can be written here but I will just mention the model binding feature that VueJs and Angular offer that make life easier.

Personal feeling, VueJs contains the best features of the two worlds (Angular and React).

Thai Pangsakulyanont • May 25 '20 • Edited

I use both React and Vue. Here are my thoughts:

When I build prototypes, I like to use Vue.

When I prototype, I use Vue without any build tooling (no vue-cli, no webpack, no dev server; just an HTML file; double-click, open, edit, refresh). I made a single-file template for me to kickstart new projects with it.

For React, at least I need a dev server to be productive. Some people recommended me babel-standalone, but it doesn’t work with <script src="..."> in file:/// URLs without disabling web security in Chrome. htm also exists that lets me create virtual DOM nodes with tagged template literals, but my code wouldn’t be in normal JSX syntax anymore. I also tried hyperscript before. Having different syntaxes to represent the virtual DOM in different React projects added a lot of mental load. When I use React I prefer JSX and nothing else.

I find Vue’s reactivity system and its two-way bindings for forms (v-model) made me very productive. I just change the object (this.loading = true) and the UI updates. No need to useState and do all the data-binding ceremony.

Now the closest thing to this experience I’ve found so far in React land is MobX, but it requires me to use either useObserver (hooks), <Observer> (render props) or observer (HOC) to make the component reactive. It’s not built in.

Vue comes with a :class helper, which turns arrays and objects into a class string. e.g. :class="[ running ? 'bg-green-400' : 'bg-red-400', { 'opacity-50': disabled }]"

In React, I had to concatenate className strings by myself or use a third-party library such as classnames. It’s not built in.

Vue has enter and exit transitions as well as move animations (implementing the FLIP technique) built-in.

In React I would have to use a 3rd party library like react-flip-move. It’s not built in.

However, if I’m creating a project that I intend to maintain long-term, I would use React.

It has a first-class support by TypeScript ("jsx": "react"). The JavaScript and TypeScript Language Service allows me to do large-scale automated refactoring. For example, in VS Code, I can rename a component’s prop, let’s say from title (a very common name) to pageTitle, and the editor would find every file that uses this component and automatically renames it. (Video demonstration)

For Vue, there’s been a feature request for this (rename symbol) support since 2017. As of writing, Vetur still cannot rename symbols. I would have to either use WebStorm or resort to find-and-replace (can be risky for common prop names like title) or manual refactoring (can be more time-consuming).

React components can return just text (no wrapping nodes), as well as multiple nodes (React.Fragment).

For Vue, you get errors like ”Component template requires a root element, rather than just text.” and “Cannot use <template> as component root element because it may contain multiple nodes.” React supports this since 2017. For now, in Vue, we have to use a 3rd party library like vue-fragment. I heard that Vue 3 will support this and I am really looking forward to it.

Derek D • May 26 '20

Vue 3 will fix all your qualms with v2 and should be entering Beta relatively soon. It has first class TS support (it's written in TS), fragments, portals, suspense, hooks and is smaller and faster👍

Thai Pangsakulyanont • May 26 '20

Thanks for your comment, I’m looking forward to it! 🤩

Regarding tooling, will I be able to rename a prop and have that rename propagate throughout my source tree when v3 comes out?

I consider this an absolute must before I can consider using it in serious projects because I do a lot of small refactoring.

Sometimes I name variables/props x/foo/tmp and rename it later when I have the main logic figured out, where I can actually be more thoughtful about naming things… and I don’t want to do that renaming manually.

Derek D • May 28 '20

To be honest, I have no idea. I don't generally rename props. I don't see an issue if you're using JSX for templating, but using the template syntax, I'm not sure. You can download the alpha and try ;)

Andrew W • May 25 '20

Love your starter template! That was very similar to one I used (except with routing). I recently changed to http-vue-loader so I can write my templates in external files.

Drew Bragg • May 25 '20

I started with React and used it a lot. I was super hesitant to start using Vue but my new job required it. After about a month of Vue I liked it as much as React. After 3 I liked it more than React and started to deep dive into it. Single file components made a lot more sense to me, the ability to build functional components instead, when appropriate, was great, and the whole Dev process was just nicer. I've been using Vue for almost 3 years now I and I don't miss React at all. Just looking at files in React vs Vue make me love Vue even more.

As a bonus, it's super easy to inject Vue components into a Rails view. I normally use Stimulus if I'm working on a Rails project but if I need JS super powers being able to inject a Vue component easily is awesome.

krishna kakade • May 25 '20

Vuejs is fast and easy to learn but for react you need more experience with javascript about ES6 syntax but you can do more things with react btw i still react developer and I am enjoying it also .drop your thoughts below 🔽 have a good day!

Marc Backes • May 26 '20

I believe it is crucial that for whatever JavaScript framework you want to use, you get a good grasp of JavaScript first. (This includes ES6+, which I consider part of JavaScript).

You can do all the things with Vue that you can also do with React. The biggest difference is the way you code and the way it works internally. Both Vue and React can be used for large-scale apps.

I would even make the point that Vue is more versatile because it can easily be included in legacy code while React doesn't give that option.

In the end, it all depends on personal preference. Whether you like React, Vue, Angular, Ember, Svelte, etc... The most important part is that you feel comfortable with the framework or library you choose.

My personal preference is Vue, because I find it way more elegant than React.

Christian Melgarejo • May 25 '20

No svelte.dev love? 😜

Greg Fletcher • May 25 '20

Secret svelte devs unite! 😜

Michael Z • May 26 '20

I just leave this here ☺️

Sarah Dayan

@frontstuff_io

- How do I find a @vuejs developer?
- Don’t hire a @vuejs developer, hire a JS developer. Then give them a day on the docs and they’ll be a @vuejs developer. – @chrisvfritz

So true. Took me a day of reading the full docs (literally) to feel ready to build with Vue. #VueConfTO

14:27 PM - 12 Nov 2019

244 1127

Fayaz Ahmed • May 26 '20

I had an option to choose when my previous company was paying for a course, I had a react course already purchased but vue kept popping up in my social. I tried both and ended up choosing vue because it was just more readable and I was able explain my frontend code even to my Team lead who is a traditional python dev and now I work as a professional vue dev and I can say I am pretty happy with my descision of moving ahead with it.

Matthew Daly • May 25 '20

I've dabbled with Vue a couple of times, but I've found it to be too complex for my liking, with more magic than I'd like and an uncomfortable amount of additional syntax to learn.

React is conceptually simpler, and thus I find it easier to understand what is going on. As I generally write only functional components nowadays, it's easy to understand a component as just a function that returns HTML. It also tends to encourage writing smaller components than Vue, making them easier to understand. There's also less special syntax, since apart from a few differences like className and htmlFor, the templates are mostly just Javascript. That does make the barrier to entry with React a bit higher, though.

I really enjoy working with React, since I've always enjoyed writing Javascript and I feel like it embraces the language to a greater extent than Vue or Angular.

Preet Parekh • May 25 '20

Started out with Vue, for the reason that it seemed more like Html. (This is before hooks ).
Really enjoyed the developer experience given this was my very first web framework.
The nature of Vue having fundamentals (Routers SSR ) in house made it super easy to get things done.
Also the the ability to use vue-ui to start apps was kinda magic to me.

The only problem with Vue is the UI libraries available on top are kinda not amazing.

Now coming to react, gave it a shot after the stabilization of hooks and it was a breeze to build products with it.
The task in using react is you have a lot of options. You task is to over time try these out and pickout the packages that you like to work with.
And that's a tedious task.

Pan Chasinga • May 26 '20

This is my personal take, please take it with a grain of salt.

Vue

I'm quite frustrated with Angular, and although Vue seems easier to begin with, it still embraces some patterns from Angular, like bi-directional bindings, which are really confusing in a bigger code base.

Vue still requires one to separate representation (HTML) from data (JS), which is a conventional way of thinking but the context-switch can be exhausting.

I like the community and the fact that it's being authored to massive adoption by just a developer is empowering. The ecosystem is catching up and on-par with React.

React

Although React may appear to have a lot of jargons, it is very fast to learn coming from a functional language. If you have tried Elm, I think you will appreciate React (Elm is like the ultimate Nirvana for React). It was confusing to me at first, but more and more functional components seem to make a lot of sense and easier on debugging.

I like the fact that I can think of elements in terms of data (JSX) instead of HTML and code in the traditional way. It's very much coherent with the way many functional languages do things. The current introduction of hooks finally obliterate the need to write class-based components, which is awesome.

GaurangDhorda • May 28 '20

which one is your biggest frustration about angular?

santosh • Aug 7 '20

Angular itself.

Infinity Detective • Jul 17 '20

i started my front-end skills with vue 2 but after react released version 16 with hooks that means no need of class cumbersome but functional way then i decided to stay with react because vue 3 tried to implement such technique .

Etienne Burdet • May 29 '20 • Edited

One thing I really like with Vue, is that it makes very clear what is specific to Vue. You migh call the props/component/data/methods object boilerplatey, but when you come to a code base you clearly have the This part is Vue and This part is regular JS.

It also provides shorthands for the most common tasks, as part of the same "We're not afraid to be a framework" philosophy.

Reach though, with its it's just JS approach, it's harder if the other dev has done something because of React or some other purposes. This leads to an unecessary amount of constructor(props) { super(props); this.state = {… for trivial things for exemple.

Pacharapol Withayasakpunt • May 26 '20 • Edited

Considerations,

Is <template> tag a great idea? What about SFC as in Vue and Svelte? It actually makes it harder for IDE and TypeScript... But it enhances a great structure. But I think foldered component as in Angular might be a better idea not to compromise the IDE, and also add .spec.ts.
I never think JSX is a bad idea. Just SFC / decoupling with templating language is a better idea. But JSX might be easier to lint / IDE-integrated.
Is two-way binding a good idea, or better immutable as in React?
Is Vue 3 (vs Vue 2) takes a good direction or not?
In the end, I only care about scalability / maintainability? Not even sure which is better (both have downsides).

Andrew W • May 25 '20

I started with Angular 6-ish years ago, and was AMAZED when I found React: So much less boiler plate, flexibility in how the app is built, etc.

But my templates started to feel like PHP. A ton of code mixed with HTML. I also prefer to build apps incrementally, so not being able to drop in static HTML without customizing "class=" etc bothered me.

The first time I saw Vue, I fell in love immediately. I loved the Angular-like template syntax for looping, if statements, etc. The data binding was icing on the cake, not having to setState and just updating an object as I normally would.

I know Vue has its downsides. I have no idea how many times I've used $forceUpdate() or $set() as a hack because an object wasn't initialized with all of the data necessary. I also know React has changed a lot since I last used it.

I'm pretty sure the dev styles are just down to personal preferences, so I'm no React hater!

Derek D • May 26 '20 • Edited

Curious why you're having to use Vue.set() so much? I constantly hear it as being a downside to Vue, but in the 50+ apps I've built currently running in production, I don't think I've ever had to use it (this won't be an issue in v3, though 👍). Every once and a while I'll need to use $forceUpdate() but usually it's because of something that was coded incorrectly after going back and looking at it later.

leob • May 26 '20 • Edited

Vue is more "batteries included", with stuff like Vue Router and Vuex offered "out of the box". This leads to much less debate and discussion about "how to do things" (even quite basic things, that is).

I would argue that this makes Vue (at least for beginners) much more approachable and less intimidating than React, with a smaller learning curve.

In contrast, the React world seems to be dominated way more by discussions about patterns and libraries, all of them with their fans and opponents. The debates surrounding Redux (with all of its variants - "Thunks", "Sagas" and so on), Context, HOCs, Render Props, Hooks etc are never ending.

What React has going for it is of course its dominant market share in terms of jobs, community and ecosystem - apart from that I'm definitely more sympathetic to the Vue approach.

P.S. I saw Svelte mentioned here in a few comments and I think it also absolutely deserves attention!

Derek D • May 26 '20 • Edited

Personally, it boils down to the ecosystem for me. React has a very vibrant community, but that is both a plus and negative IMO. The React landscape is constantly changing. New, innovative, things come quickly, but the community is so fragmented on how to do things, it makes it harder to just pick the right tools and start working.

Outside of Context and Hooks, for state management, React has so many options:

Redux
Mobx
Unstated
Recoil
Kea
Stator
Etc.

Vue has an official library - Vuex.

Routing in React is different from pretty much every other library ever made. Instead of creating routes as objects (controllers), they are created as components inside the JSX. React Router v6 will FINALLY allow route definition by object, but it's still in alpha last I looked.

Vue offers this now, with an official router plugin.

React has a million ways to style components, few of which actually use basic CSS.

Vue allows you to use CSS, SCSS, etc and scope them to the component without an effort. Just add "scoped" to the style tag. You can also export it as a module with "module", instead.

Building something as simple as a form should be... simple. Not in React. There are countless packages to handle forms because doing it is cumbersome with 1-way data binding.

With Vue, just add v-model to your from element and your values magically update on each input.

Create-react-app is limited and assumes you'll only build your app a certain way.

The Vue CLI is super flexible and prototyping and scaffolding apps is super simple. They even have the Vue UI app built in to give the CLI a GUI.

JSX has first class support in Vue, too. So does Pug. Both are configuration options in the CLI. You don't have to use the template system.

The thing with React is, you HAVE to add so many libraries to it, because it's not really that powerful without them and with Vue, there's not many libraries you have to reach out for besides what's included in the "core" ecosystem.

IMO Vue is going to get a huge spike in popularity this year, once v3 is released. First-class TypeScript support, Hooks, fragments, portals, suspense and an even smaller bundle size with faster response times, all with a strong core ecosystem.

Don't get me wrong, I love React. If it weren't for React, Vue 3 wouldn't be shaping up to be so awesome, but I'd have a hard time recommending it for anything other than the fact that there are more React developers than anything else right now. IMO, picking something based on popularity isn't a good idea, though, unless the other option is so small its longevity is a concern.

Ibrahim Abdullahi Aliyu • Jun 8 '20

I go with Vue because

It's unopinionated unlike with React( usage of JSX) and Angular( usage of Typescript)
It's choice of state management(Vuex) and Routing (Vue-router) although you are free to not use them
Beginner friendly
Maintainability( the creators are dedicated in improving it) The advantage I think React have over Vue is it's community, although Vue community is also growing fast