React vs Vue: The Core Differences
This post was originally written by me for the MentorMate blog .
In this blog, we’ll examine the main differences in the way React and Vue work and the core ideas behind them. Our intention is not to make comparisons of each technology’s popularity, job prospects, or documentation. Rather, we’ll compare them from a technical perspective.
Before discussing the core differences between React and Vue, it’s important to note the traits that they have in common.
Here’s an example of the Virtual DOM:
React and Vue are both lightweight, have component-based architecture, and expose lifecycle methods. Their performance is fairly similar so those differences are too negligible to be discussed. Both technologies can easily be plugged into any existing web application, even if it’s not a Single Page Application. This is the case with the Gutenberg editor, which is built with React and was recently implemented in the WordPress ecosystem. Similar is the case with GitLab, where the jQuery codebase is being gradually replaced with Vue.
Last but not least, both React and Vue have big proactive communities and plenty of libraries and tools available.
Let’s begin with the most obvious distinction: React is a library, whereas Vue is a framework*.
React allows DOM manipulation, component architecture, and state management (the component-level state, not Redux). All the rest is left up to the community. This approach offers a lot of freedom for the developers. Many React applications rely on third-party libraries, built, and supported by the community, and the choice for the right one might be challenging for beginners.
Vue, on the other hand, is more opinionated and comes with a lot of syntactic sugars, plugin system, built-in directives, transitions, etc. Plus, the core team created companion libraries for routing and state management along with other helpful tools. Some examples of such companion libraries are the Vue-router, Vuex for state management, and Vue CLI. Of course, users are not obliged to use these tools as there are some alternatives. The main benefit is that these are built and supported by the core team. Vue’s main focus is simplicity and the team has taken care of these common concerns, enabling faster setup and development. Vue is quickly catching up to React and the community has built plenty of third-party libraries, enriching its ecosystem.
React is known for its promotion of the functional programming (FP) style. It implements FP principles, such as higher-order functions, immutability, pure functions, etc. The philosophy behind React is that the state should be immutable. When trying to mutate the state object, no re-rendering occurs. In order to trigger re-rendering, the method setState should be used. This updates not only the root component but the entire component sub-tree as well. The re-rendering process can be controlled by using PureComponent or shouldComponentUpdate lifecycle hook. That flexibility comes at a cost, though, so all the optimizations should be done manually. This makes the data flow more predictable. Overall, React gives developers a lot of control over the re-rendering process.
You can find an example in this demo React application I made.
In Vue, the state is represented in the data object. Unlike React, the mutation of the state object triggers re-rendering. You can find an example in this demo Vue application I made.
However, there are some gotchas. For example, mutating nested objects or arrays might not trigger re-rendering. In this case, we can either use the Vue.set method (similar to the setState method in React) or make the changes in immutable fashion by using Object.assign or the ES6 spread operators. This can be confusing to beginners but you can find more information the internal mechanism behind Vue here.
Vue automatically performs optimizations to update specific parts of the component tree but doesn’t offer a manual way to prevent re-renders. In React, it’s up to the developer to decide when and where to manually prevent them.
Templating and Styling
Templating and styling are essential parts of every UI library and is also where the differences between React and Vue are the most obvious since it affects the code design. There’s a large contrast in the way both technologies approach it.
In terms of styling, the React community has come up with different solutions like JSS and Styled components. This is a typical example of the freedom and the rich choices that the React community offers. For years, they’ve addressed the CSS`s flaws and has come up with great — revolutionary even — ideas. Personally, I’m a big fan of Styled components.
Vue takes a more conservative approach to templating and styling — one that’s separated from the logic. The markup is represented as templates that look just like old school HTML. In fact, every valid HTML is also a valid Vue template. Inside the templates, the framework offers a lot of syntactic sugars like conditionals, iterations, etc.
The same is true for the way Vue handles styling. In the style tag, you can write pure CSS or any preprocessor. In addition, the „scoped” attribute allows styles encapsulation on component level. In general, styling in Vue feels more natural to newcomers but lacks some of the flexibility that the CSS-in-JS solutions from the React ecosystem offer.
Extending Vue or React applications with third-party libraries is quite simple. Most of the vendor libraries for React are simply components that enhance the existing ones already. For instance, the React-Redux library is using the Context API and exposes a higher-order component that makes state accessible from every component of choice.
In Vue, many of the third-party libraries are in the form of plugins, taking advantage of the built-in plugin system. The plugins can be added by using the Vue.use method.
Both technologies offer great advantages. Being a library, React gives more control to its users, like the manual re-rendering control. It heavily employs the functional programming principles, which is clearly indicated in the way the library handles the state and the communication between the components. In contrast, Vue as a framework, provides more built-in features and companion libraries from the core team, which eventually makes development experience smoother.
If you’d like to try React out for yourself, you can start with Create React App. It’s a great tool for generating React projects without all the boilerplate. If you want to build a Vue project, you can use Vue-CLI, which offers great options out of the box.
*in the official docs, Vue is described as framework and React as library. The difference between framework and library can be subtle and remains open for interpretations.
Additional contributions and editing by MentorMate Senior Front-End Developer Rosen Kanev.