5 Reasons Why Vue is Better than React

In many ways, frontend frameworks are interchangeable. React, Vue, Angular 1, Angular 2+, and Ember are essentially identical if you zoom out far enough: with all these frameworks, you’re organizing your code in a tree of components, parent components pass props to child components, etc.

Some might think that the only meaningful tradeoff between these frameworks is how easy it is to hire developers that know the framework. That’s what I thought for several years. But working with Vue over the last couple of years has thoroughly convinced me: Vue is the best frontend framework for developer productivity. Here’s a few reasons why.

One of the biggest limitations of JSX is that most designers and design tools produce HTML. Given a design that uses vanilla CSS and HTML, you’re stuck figuring out how to convert it to JSX. And if the designer wants to make changes, either they need to learn JSX, or you need to create an automated build process to convert HTML to JSX.

You can spend days yak shaving an HTML to JSX build pipeline, but making an HTML page “reactive” with Vue is a 7-liner, plus adding `v-model` and `v-text` to the HTML elements you want to wire up.

HTML templates are delightfully portable. Because you don’t need any build step, you can pull templates from anywhere based on your needs: template tags, Node.js’ `fs` module, DOM element `innerHTML`, `fetch()` from a server, etc.

Building a form with Vue is trivial because of two-way data binding. No worrying about controlled components versus uncontrolled, no need for a state store, no need to `.bind()` every function call to avoid losing context. No need to install any extra npm modules either. Vanilla Vue is more than enough to write a simple form.

Vue 2’s two-way data binding is much smarter than Angular 1’s was because it is based on intercepting property modifications using `Object.defineProperty()`, rather than diffing the state after the fact. Intercepting `get()` and `set()` means Vue can update state in a consistent way regardless of how you set state. No need to abuse the spread operator.

React unfortunately lacks good support for async/await. You need to handle errors in async lifecycle hooks yourself, React error boundaries won’t help.

Vue, on the other hand, has a beautiful `errorCaptured` lifecycle hook. Vue calls that hook whenever an uncaught error occurs, including if your hook returns a rejected promise. That means the `errorCaptured` hook can handle both sync and async errors.

When it comes to async, Vue is the modern frontend framework, whereas React is hopelessly stuck somewhere in early 2016.

Computed properties in Vue make template rendering much cleaner. And, even better, Vue handles reactivity in computed properties for you. Here’s a concrete example: suppose you have an array of reviews. Each review has a score, and you want to display the average score.

The neat thing here is that, by intercepting property accesses, Vue is smart enough to know that `average` changes if and only if `reviews` changes. So Vue only recomputes the average if you modify `reviews`.

Vue is extremely portable. It doesn’t lock you in to any one pattern. In fact, Vue makes it delightfully easy to reuse code in different environments and constraints.

For example, you can use vue-server-renderer to render an app to an HTML string in plain old Node.js, no transpiler required. Here’s how you can write a test for a simple counter component in Node.js: