Vue and React are two different things but are often used to carry out the same frontend tasks. ReactJS was a source of inspiration for the creator of Vue, which is why it uses many of the same technologies and features you see in React. However, Vue is an entire framework, while React is a library.
Talking of React vs Vue, what is the difference? Both React and Vue have a similar virtual DOM architecture, plus they use JavaScript and JSX with additional support for TypeScript. Vue is designed around creating interactive multi-page applications and uses a leaner version of the virtual DOM from React (plus it’s easier to integrate into existing backends).
Generally speaking, Vue app design is more opinionated with official libraries for routing, state management, configuration, etc. But it also provides developers with the choice to do things in an unopinionated fashion. If you’re a startup looking to quickly create MVPs, Vue might be the better choice over React due to its extensive documentation and easier learning curve.
Here’s a table comparing the major differences between React and Vue
| React | Vue | |
| What It Is | A JavaScript library for UI that’s based around components with a declarative programming paradigm | Lightweight and progressive JavaScript framework for creating frontends of reactive web applications |
| Made By | Jordan Walke at Facebook in 2011 | Evan You at Google in 2013 |
| How It Works | Makes extensive use of JSX, keeps both logic and UI in single file | Vue also combines logic and UI, but uses HTML templates in addition to JSX |
| Virtual DOM Implementation | Tracks a copy of the entire tree kept in memory to compare changes, only updates real DOM when needed | Templating helps Vue create a mini DOM of each component and it only tracks dynamic elements within the tree |
| Code Size | Fairly compact, although the React library itself requires external add-ons for things like routing | Also quite compact, but generally speaking the code weighs less than React |
| Flexibility | Its design as a library lets you add other JS libraries to the source code to fulfil any requirements for your apps | Vue is a framework, so you get a set of standardized tools for things like routing/ state management that would otherwise require external libraries in React |
| Desktop And Mobile Development | You can make apps for desktop and mobile devices with React Native | Vue Native is a framework for making native apps with Vue, and it also supports Alibaba’s Weex initiative for cross-platform UI design |
| Community Support | Backed by Meta, and a huge group of talented open-source contributors from all over the world | Originally started by one person, now a worldwide phenomenon thanks to its elegant yet simple code structure and flexibility |
| Advantages | High performance, flexible architecture, SSR, can link JavaScript and HTML with JSX | Small size and elegant architecture makes it ideal for startups and prototyping, while also maintaining the ability to scale up with your needs |
The Origin Of React
In my various articles on React, I’ve talked about its origin as a JavaScript library for UI design within the offices of Facebook. We know that Jordan Walke initially came up with FaxJS- a prototype version of React that was inspired by XHP. He designed it to deal with the growing needs of Facebook Ads, with a focus on reusability and ease of code maintenance as applications scale up in size.
What you may not know is that the performance benefit of React’s Virtual DOM architecture was simply a byproduct of its design. Originally, the team was simply looking to make a cleaner programming layout. Over time, the React team has implemented various upgrades to the virtual DOM (the latest of which is React Fiber- their new reconciliation engine).
The Origin Of Vue
Evan You created Vue to merge the best parts of AngularJS and React. He took inspiration from both, and the result is a lightweight progressive framework with an elegant code structure and more freedom than Angular. You get the component-based structure of React, but with all the goodies that can only be had with a framework.
Evan liked the data-driven DOM approach taken by Angular and its data binding system. At the time, he was working on a bunch of prototypes and wanted something lighter than Angular. He created the core of Vue around data binding and components.
With a focus on user-friendliness so that anyone familiar with the basics of JavaScript and HTML can pick it up. Vue can be scaled up with additional modules stacked on top of its core, and it tries to be a middle ground between React and Angular. You can add solutions for state management, routing, build toolchain, CLIs, etc. that are well developed and documented by the Vue team.
Comparing How They Work
React and Vue share many similarities but are also quite different when you consider that one is a library, while the other is a framework. React’s virtual DOM implementation uses data rendering within the browser to create a copy of the actual DOM. Whenever a user clicks something, scrolls down, etc., there are changes to the DOM hierarchy tree.
The reconciliation engine tracks these changes and renders new elements of the page based on them. The system is constantly taking “snapshots” of the DOM and comparing them to the previous one. Depending on how many node elements have been altered, React’s virtual DOM will update the real one.
Vue also uses a virtual DOM system, but the processing is more efficient. It doesn’t scan the entire tree on each update. Instead, it focuses on the dynamic elements of each web page.
React’s Fiber reconciliation engine further optimizes the data flow by using a concept similar to double buffering from game engines. It groups component updates and DOM changes/ lifecycle methods into different categories. Instead of processing the nodes as a tree, it takes a linear approach to optimize the render pipeline.
Both React and Vue support two-way data binding, although React promotes one-way data binding. React hook libraries let you execute 2-way data binding similar to Angular. Both Vue and React recommend one-way data binding since it’s more predictable and easier to maintain.
Comparing Their Code Size
The React library itself is slightly larger than Vue, and you also have to add in a bunch of external libraries for routing/ state management. Both React and Vue use JavaScript and JSX, with support for TypeScript. In React, all render functions are done via JSX which lets you build a richer view.
But Vue also offers templates. Hence it is easier for people familiar with HTML. The templates are easier to write and read, and it also makes the job of migrating an existing page/ app into Vue much quicker.
Comparing Their Flexibility
Both React and Vue are designed around UI but one focuses primarily on the “View” layer, while the other handles MVC as a whole. React can be augmented with 3rd party packages to handle state management. But Vue has official modules for this purpose right from the start that you can add or remove.
Much like Redux and React Router, Vue has Vuex and Vue Router. Server-side rendering can be done on Vue, just like React. Vue is more intuitive for novice developers, and its modular design lets you choose between the core tools or a fully upgraded framework with a wider range of tools.
Comparing Their Advantages
React is preferred by developers for its “learn once, write anywhere” approach and unopinionated layout that lets you modify the core library by adding or removing components as you wish. Vue is slightly more opinionated, but it also helps with configuring your project and leads to quicker prototyping times. You get all the tools needed for routing, state management, file organization, etc. within one framework.
Vue is also modular, meaning you can add or remove elements from the core library. This way, you can decide how much overhead you want for your work. Vue also has excellent documentation and its basic structure is built around HTML + JavaScript which is easy to understand for novices.
Both React and Vue use virtual DOM systems for high performance, and they are quite close on all modern browsers. Both also support server-side rendering. One thing unique to Vue is that you can pick and choose which aspects of your application you want to progressively migrate into Vue (incremental integration).
Comparing Their Community Support
React has been around for slightly longer and as such, it has wider industry acceptance. Everything from web apps to SaaS software is done in React. However, Vue is definitely on the rise due to its modular and streamlined nature. Vue has a smaller community, but very rich and detailed documentation which is excellent for anyone trying to learn this framework.
Conclusion
Both React and Vue are excellent choices for building scalable single/ multi-page web applications, thanks to their component-based structure and virtual DOM. React requires a bunch of 3rd party libraries to be used in an actual project, while Vue comes with everything you need from the start. For incremental upgrades to your existing app, Vue might be a better choice.
Vue and React have excellent communities with plenty of documentation which is what you need when you’re working on a project with either framework. Vue might take the edge when it comes to documentation. Combined with its support for HTML templates, that’s one of the reasons so many developers love Vue.