Reference: Official Docs
Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.
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.
Both React and Vue are exceptionally and similarly fast, so speed is unlikely to be a deciding factor in choosing between them!
Optimization efforts:
-
In React, when a component's state changes, it trigger the re-render of the entire component sub-tree, starting at that component as root.
-
In 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.
Overall this removes the need for a whole class of performance optimization from the developer's plate, and allows them to focus more on building the app itself as it scales.
In React,render functions with JSX have a few advantages:
-
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.
-
The tooling support (e.g. linting, type checking, editor autocompletion) for JSX is in some ways more advanced than what’s currently available for Vue templates.
On the other hand, any valid HTML is also a valid Vue template, and this leads to a few advantages of its own:
-
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.
-
HTML-based templates make it much easier to progressively migrate existing applications to take advantage of Vue’s reactivity features.
-
It also makes it much easier for designers and less experienced developers to parse and contribute to the codebase.
-
You can even use pre-processors such as Pug (formerly known as Jade) to author your Vue templates.
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 (Domain-specific language) 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.
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.
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, glamorous, and emotion). While 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.
<style scoped>
@media (min-width: 250px) {
.list-container:hover {
background: orange;
}
}
</style>► Scaling up
For large application, both Vue and React offer robust solutions.
-
React state management patterns and even Redux itself can be easily integrated into Vue applications.
-
In fact, Vue has even taken this model a step further with 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.
Finally, 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 to instant prototyping a component.
► Scaling down
React is renowned for its steep learning curve: JSX, ES6. 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.
While Vue scales up just as well as React, it also scales down just as well as jQuery. That’s right - to get started, all you have to do is drop a single script tag into the page:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>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.
Some of Vue's syntax will look very similar to AngularJS (e.g. v-if vs ng-if). This is because there were a lot of things that AngularJS got right and these were an inspiration for Vue very early in its development. There are also many pains that come with AngularJS however, where Vue has attempted to offer a significant improvement.
Vue is much simpler than AngularJS, both in terms of API and design. Learning enough to build non-trivial applications typically takes less than a day, which is not true for AngularJS.
AngularJS has strong opinions about how your applications should be structured, while Vue is a more flexible, modular solution. While this makes Vue more adaptable to a wide variety of projects, we also recognize that sometimes it’s useful to have some decisions made for you, so that you can just start coding.
AngularJS uses two-way binding between scopes, while Vue enforces a one-way data flow between components. This makes the flow of data easier to reason about in non-trivial applications.
Vue has a clearer separation between directives and components. Directives are meant to encapsulate DOM manipulations only, while components are self-contained units that have their own view and data logic. In AngularJS, directives do everything and components are just a specific kind of directive.
Vue has better performance and is much, much easier to optimize because it doesn’t use dirty checking. AngularJS becomes slow when there are a lot of watchers, because every time anything in the scope changes, all these watchers need to be re-evaluated again. Also, the digest cycle may have to run multiple times to “stabilize” if some watcher triggers another update. AngularJS users often have to resort to esoteric techniques to get around the digest cycle, and in some situations, there’s no way to optimize a scope with many watchers.
Vue doesn’t suffer from this at all because it uses a transparent dependency-tracking observation system with async queueing - all changes trigger independently unless they have explicit dependency relationships.
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.
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#.
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.
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).
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.
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.