React
React and Vue share many similarities. They both:
- utilize a virtual DOM
- provide reactive and composable view components
- maintain focus in the core library, with concerns such as routing and global state management handled by companion libraries
Being so similar in scope, we’ve put more time into fine-tuning this comparison than any other. We want to ensure not only technical accuracy, but also balance. We point out where React outshines Vue, for example in the richness of their ecosystem and abundance of their custom renderers.
With that said, it’s inevitable that the comparison would appear biased towards Vue to some React users, as many of the subjects explored are to some extent subjective. We acknowledge the existence of varying technical taste, and this comparison primarily aims to outline the reasons why Vue could potentially be a better fit if your preferences happen to coincide with ours.
Some of the sections below may also be slightly outdated due to recent updates in React 16+, and we are planning to work with the React community to revamp this section in the near future.
Runtime Performance
Both React and Vue are exceptionally and similarly fast, so speed is unlikely to be a deciding factor in choosing between them. For specific metrics though, check out this 3rd party benchmark, which focuses on raw render/update performance with very simple component trees.
Vue > React
#1. Optimization Efforts
In React, when a
1)component’s state changes, it triggers the 2)re-render of the entire 3)component sub-tree, starting at that component as root.
해결방법1 : To avoid unnecessary re-renders of child components, you need to either use PureComponent or implement shouldComponentUpdate whenever you can.
해결방법2 : You may also need to use immutable data structures to make your state changes more optimization-friendly.
한계 : However, in certain cases you may not be able to rely on such optimizations because PureComponent/shouldComponentUpdate assumes the entire sub tree’s render output is determined by the props of the current component. If that is not the case, then such optimizations may lead to inconsistent DOM state.
Vue
- a component’s dependencies are automatically tracked during its render : so the system knows precisely which components actually need to re-render when state changes.
- Each component can be considered to have shouldComponentUpdate automatically implemented for you, without the nested component caveats.
효과: removes the need for a whole class of performance optimizations from the developer’s plate,
and allows them to focus more on building the app itself as it scales.
#2. HTML & CSS
React
everything is just JavaScript.
- HTML structures expressed via JSX
- the recent trends also tend to put CSS management inside JavaScript as well.
This approach has its own benefits, but also comes with various trade-offs that may not seem worthwhile for every developer.
Vue
- embraces classic web technologies and builds on top of them.
Ex.JSX vs Templates
React
all components express their UI within render functions using JSX, a declarative XML-like syntax that works within JavaScript.
JSX의 장점
Render functions with JSX have a few advantages:
1)You can leverage the power of a full programming language - (JavaScript) to build your view. (This includes temporary variables, flow controls, and directly referencing JavaScript values in scope)
2)The tooling support
(ex. linting, type checking, editor autocompletion) for JSX is in some ways more advanced than what’s currently available for Vue templates.
Vue의 장점
-
we also have render functions and even support JSX, because sometimes you do need that power.
-
However, as the default experience we offer templates as a simpler alternative. Any valid HTML is also a valid Vue template, and this leads to a few advantages of its own:
(1) For many developers who have been working with HTML, templates feel more natural to read and write. The preference itself can be somewhat subjective, but if it makes the developer more productive then the benefit is objective.
(2) HTML-based templates make it much easier to progressively migrate existing applications to take advantage of Vue’s reactivity features.
(3)It also makes it much easier for designers and less experienced developers to parse and contribute to the codebase.
(4)You can even use pre-processors such as Pug (formerly known as Jade) to author your Vue templates.
(5)Similarly, a template is just additional syntax on top of plain HTML and thus has very low learning cost for those who are already familiar with HTML. With the DSL we are also able to help the user get more done with less code (e.g. v-on modifiers). T
Some argue that you’d need to learn an extra DSL (Domain-Specific Language) to be able to write templates - we believe this difference is superficial at best. First, JSX doesn’t mean the user doesn’t need to learn anything - it’s additional syntax on top of plain JavaScript, so it can be easy for someone familiar with JavaScript to learn, but saying it’s essentially free is misleading. Similarly, a template is just additional syntax on top of plain HTML and thus has very low learning cost for those who are already familiar with HTML. With the DSL we are also able to help the user get more done with less code (e.g. v-on modifiers). The same task can involve a lot more code when using plain JSX or render functions.
Components
On a higher level, we can divide components into two categories: presentational ones and logical ones.
We recommend using
- templates for presentational components and render function
- JSX for logical ones.
The percentage of these components depends on the type of app you are building, but in general we find presentational ones to be much more common.
#3. Component-Scoped CSS
Unless you spread components out over multiple files (for example with CSS Modules), scoping CSS in React is often done via CSS-in-JS solutions (e.g. styled-components and emotion). This introduces a new component-oriented styling paradigm that is different from the normal CSS authoring process. Additionally, although there is support for extracting CSS into a single stylesheet at build time, it is still common that a runtime will need to be included in the bundle for styling to work properly.
장점 : you gain access to the dynamism of JavaScript while constructing your styles the tradeoff is
단점 : often increased bundle size and runtime cost.
If you are a fan of CSS-in-JS, many of the popular CSS-in-JS libraries support Vue (e.g. styled-components-vue and vue-emotion). The main difference between React and Vue here is that the default method of styling in Vue is through more familiar style tags in single-file components.
Single-file components give you full access to CSS in the same file as the rest of your component code.
The optional scoped attribute automatically scopes this CSS to your component by adding a unique attribute (such as data-v-21e5b78) to elements and compiling .list-container:hover to something like .list-container[data-v-21e5b78]:hover.
Lastly, the styling in Vue’s single-file components is very flexible. Through vue-loader, you can use any preprocessor, post-processor, and even deep integration with CSS Modules – all within the
#4. Scale
Scaling Up
1) 라우팅 : For large applications, both Vue and React offer robust routing solutions.
2)상태 관리 :
The React community has also been very innovative in terms of state management solutions (e.g. Flux/Redux). - 커뮤니티에서 제작
Vuex
an Elm-inspired state management solution that integrates deeply into Vue that we think offers a superior development experience.
-
공식 제작
-
Another important difference between these offerings is that Vue’s companion libraries for state management and routing (among other concerns) are all officially supported and kept up-to-date with the core library.
-
React instead chooses to leave these concerns to the community creating a more fragmented ecosystem. Being more popular though, React’s ecosystem is considerably richer than Vue’s.
Vue offers a CLI project generator ( that makes it trivially easy to start a new project by featuring an interactive project scaffolding wizard.)
You can even use it for instantly prototyping a component.
React is also making strides in this area with create-react-app, but it currently has a few limitations:
한계1: It does not allow any configuration during project generation, while Vue CLI runs on top of an upgradeable runtime dependency that can be extended via plugins.
한계2: It only offers a single template that assumes you’re building a single-page application, while Vue offers a wide variety of default options for various purposes and build systems.
한계3: It cannot generate projects from user-built presets, which can be especially useful for enterprise environments with pre-established conventions.
It’s important to note that many of these limitations are intentional design decisions made by the create-react-app team and they do have their advantages. For example, as long as your project’s needs are very simple and you never need to “eject” to customize your build process, you’ll be able to update it as a dependency.
#5. Scaling Down
React
- steep learning curve.
- JSX and probably ES2015+, since many examples use React’s class syntax.
- You also have to learn about build systems, because although you could technically use Babel Standalone to live-compile your code in the browser, it’s absolutely not suitable for production.
Vue
- all you have to do is drop a single script tag into the page:Then you can start writing Vue code and even ship the minified version to production without feeling guilty or having to worry about performance problems.
Since you don’t need to know about JSX, ES2015, or build systems to get started with Vue, it also typically takes developers less than a day reading the guide to learn enough to build non-trivial applications.
#6. Native Rendering
React Native
- enables you to write native-rendered apps for iOS and Android using the same React component model.
- This is great in that as a developer, you can apply your knowledge of a framework across multiple platforms. Vue
(1)has an official collaboration with Weex - a cross-platform UI framework created by Alibaba Group and being incubated by the Apache Software Foundation (ASF).
- Weex allows you to use the same Vue component syntax to author components that can not only be rendered in the browser, but also natively on iOS and Android!
At this moment, Weex is still in active development and is not as mature and battle-tested as React Native, but its development is driven by the production needs of the largest e-commerce business in the world, and the Vue team will also actively collaborate with the Weex team to ensure a smooth experience for Vue developers.
(2) Another option is NativeScript-Vue, a NativeScript plugin for building truly native applications using Vue.js.
#7. With MobX
MobX has become quite popular in the React community and it actually uses a nearly identical reactivity system to Vue. To a limited extent, the React + MobX workflow can be thought of as a more verbose Vue, so if you’re using that combination and are enjoying it, jumping into Vue is probably the next logical step.
Angular (Formerly known as Angular 2)
We have a separate section for the new Angular because it really is a completely different framework from AngularJS. For example, it features a first-class component system, many implementation details have been completely rewritten, and the API has also changed quite drastically.
TypeScript
Angular essentially requires using TypeScript, given that almost all its documentation and learning resources are TypeScript-based. TypeScript has its benefits - static type checking can be very useful for large-scale applications, and can be a big productivity boost for developers with backgrounds in Java and C#.
However, not everyone wants to use TypeScript. In many smaller-scale use cases, introducing a type system may result in more overhead than productivity gain. In those cases you’d be better off going with Vue instead, since using Angular without TypeScript can be challenging.
Finally, although not as deeply integrated with TypeScript as Angular is, Vue also offers official typings and official decorator for those who wish to use TypeScript with Vue. We are also actively collaborating with the TypeScript and VSCode teams at Microsoft to improve the TS/IDE experience for Vue + TS users.
#2. Runtime Performance
Both frameworks are exceptionally fast, with very similar metrics on benchmarks. You can browse specific metrics for a more granular comparison, but speed is unlikely to be a deciding factor.
#3. Size
Recent versions of Angular, with AOT compilation and tree-shaking, have been able to get its size down considerably. However, a full-featured Vue 2 project with Vuex + Vue Router included (~30KB gzipped) is still significantly lighter than an out-of-the-box, AOT-compiled application generated by angular-cli (~65KB gzipped).
#4. Flexibility
Vue is much less opinionated than Angular, offering official support for a variety of build systems, with no restrictions on how you structure your application. Many developers enjoy this freedom, while some prefer having only one Right Way to build any application.
#5. Learning Curve
To get started with Vue, all you need is familiarity with HTML and ES5 JavaScript (i.e. plain JavaScript). With these basic skills, you can start building non-trivial applications within less than a day of reading the guide.
Angular’s learning curve is much steeper.
- The API surface of the framework is huge and as a user you will need to familiarize yourself with a lot more concepts before getting productive.
- The complexity of Angular is largely due to its design goal of targeting only large, complex applications - but that does make the framework a lot more difficult for less-experienced developers to pick up.
