I have been working with React for the last four years. Now I’ve just started working with Vue. What you can do in React can also be done in Vue. There are some important conceptual differences, though, some of which reflect Angular’s influence on Vue. Honestly, I am getting the feeling that Vue is the combination of the best parts of Angular and React.
One of the key factors for the comparison was that Evan You, creator of the Vue framework, used React as a source of inspiration for new framework development.
“I figured, what if I could just extract the part that I really liked about React and build something really lightweight without all the extra concepts involved? I was also curious as to how its internal implementation worked. I started this experiment just trying to replicate this minimal feature set, like declarative data binding. That was basically how Vue started. ” — Evan You
My focus in this article will be to highlight the differences between the two.
To begin with, let’s look at some facts:
a table summarizing key facts about React and Vue
A Quick Comparison
React is a library, while Vue is a complete framework.
Both are fast and lightweight.
Both have a component-based architecture.
Both use a virtual DOM.
Both can be dropped into a single HTML file or be a module in a more sophisticated Webpack setup.
Both have separate but commonly used router and state management libraries.
The big differences are that Vue typically uses an HTML template file whereas React is fully JavaScript. Vue also has mutable state and an automatic system for re-rendering, called reactivity.
Component-Based Architecture
Both React and Vue follow an approach based on reusable components.
React.Component vs. Vue.component
Both React and Vue offer a component method, but they’re extremely different. This is because React defines components as classes, while Vue defines components as objects.
Vue.component registers the component globally, while React.Component acts as a base class of your component.
Image for post
<ComponentName /> is a class name used directly in template.
Components in Vue are plain objects; no need to extend Vue.
Image for post
The same component and pattern in Vue: <ComponentName /> is just an object and must be included in the components value of the Vue app for it to display.
In spite of having a component-based approach, both are drastically different.
React JSX vs. Vue Templates
React’s render prop is just JavaScript, so everything you do in the template is the same as in JavaScript.
Vue relies on HTML templates, so it includes a few directives. These directives are very similar in design to AngularJS (in fact, almost the same:v-if, v-for, v-show, etc.)
Lifecycle Methods
Components in Vue have similar lifecycle methods to React methods as well.
Let’s try to do a one-to-one match:
constructor → created
componentWillMount → beforeMount
componentDidMount → mounted
componentWillUnmount → beforeDestroy
componentDidCatch → N/A
shouldComponentUpdate → N/A
setState → N/A — just set the property directly
Component State and Data
In React, you have state of a component. In Vue, you have data.
Setting the initial state
Image for post
React Component
Image for post
Vue Component
Updating the state
Image for post
React uses the setState method
Image for post
Vue simply assigns the property the new value.
Conditional Rendering
Image for post
React would usually use a ternary operator to conditionally render content.
Image for post
Vue introduces the v-if directive that acts the same way.
Iterating and Rendering With Loops
Image for post
In React, we usually map over the values and return a string of what you’d like each element to be.
Image for post
In Vue, we would use v-for directive
Ecosystem
Vue has more “official” libraries than React — “official” meaning it’s officially supported, maintained, and released with the core framework.
As a consequence of its age, Vue does not have as many community-supported libraries as React does.
Comparison Table
a summary table comparing React and Vue on characteristics such as maturity, community, tooling
To sum up, both Vue and React are powerful tools for creating complex web solutions. They both can provide you with a great number of possibilities so you can feel comfortable with any task.
Whatever you choose, you cannot go wrong.
Happy coding!
