What is Vue?
The Vue framework is an interface framework for building progressive web applications. Vue is designed to allow incremental implementation, which makes it different from other monolithic frameworks. There are only two main parts of the core library, which is easy to pick up and integrate with existing projects or other libraries. In conjunction with modern tooling and supporting libraries, Vue can also be used to power sophisticated Single-Page Applications.
UI components written in JavaScript using vue.js are the fastest, lightest, and most performant. It is extremely fast to build dynamic UIs using Vue. You can develop a seamless user interface with the help of its many components.
Multiple third-party solutions can be integrated using Vue. Furthermore, both one- and two-way data binding are used.
Language: JavaScript
Stable Release: Vue 2.6.11
Want to find out how Vue compares to other libraries/frameworks that are commonly used in frontend development, scroll down to read more…
React
Vue shares many similarities with React. Both of them:
- use a virtual DOM
- view components that are reactive and composable
- ensure the core library remains the focus, with companion libraries handling routing and global state management
Performance in real-time
Despite the differences in speed, Vue and React are hard to distinguish. If you are looking for specific metrics, check out any third-party benchmarks, which focuses on raw rendering/update performance with very simple component trees.
Optimal efforts
Each time the state of a component changes, React redraws its entire sub-tree, starting with the updated component at the root. Whenever possible, you should implement shouldComponentUpdate or use PureComponent to prevent unnecessary re-rendering of child components. If your state changes need to be optimized, you may also want to use immutable data structures. PureComponent/shouldComponentUpdate may not work in some cases because it presumes the entire sub tree’s render output is determined by its props; this may not always be true. Such optimizations may lead to inconsistencies in the DOM state if this is not the case.
Vue tracks a component’s dependencies during render, so it knows which components need to re-render when the state changes. Without the caveats that apply to nested components, shouldComponentUpdate can be considered to be automatically implemented for each component.
As a result of removing many performance optimizations from developers’ plates, they can concentrate on building and scaling the app itself.
CSS and HTML
JavaScript is the only language used in React. The recent trend includes putting CSS management within JavaScript too, in addition to HTML structures being expressed via JSX. Despite its benefits, this approach might not be feasible for every developer due to various tradeoffs.
With Vue, you can build a site on top of traditional web technologies. Let’s look at some examples to understand what that means.
Templates vs. JSX
JSX, a declarative XML-like syntax implemented within JavaScript, is the interface language used in React components for expressing their UI.
The following are some advantages to rendering with JSX:
Your application can be built using the power of a programming language (JavaScript). JavaScript scope functions include temporary variables, flow controls, and references directly to JavaScript values.
There is much more advanced tooling support (e.g. linting, typing, autocomplete) for JSX templates, compared to Vue templates.
Besides rendering functions and JSX support, Vue also provides render functions. Our default solution is, however, to use templates, which is a simpler UI. Vue templates can be generated from any valid HTML, and that results in a few benefits of its own:
Templates may feel more natural to developers who have worked with HTML for some time. If it increases productivity, then the preference itself has some objective value.
Vue’s reactivity features can be progressively integrated into existing applications using HTML-based templates.
The resulting codebase is also much simpler to parse and contribute to for designers and less experienced developers.
Templates for Vue can even be created using preprocessors such as Pug (previously Jade).
We believe these differences would be superficial at best and may require you to learn an additional DSL (Domain-Specific Language). There’s nothing easy about JSX; it’s simply an additional syntax on top of vanilla JavaScript, so it isn’t difficult to learn if you have a background in JavaScript. However, calling it free is misleading. Additionally, a template is just additional syntax stacked on top of HTML and, for those already familiar with HTML, has a relatively low learning curve. Additionally, with the DSL, users can quickly perform more tasks (e.g. V-ons) with less code. When using plain JSX or render functions, the same task can require a lot more code.
Specifically, presentational components and logical components can be categorized on a higher level. For presentational components, use templates while for logical ones, use render functions / JSX. We find that presentational components are more common than functional ones, but the percentage depends on the type of app you are building.
Component-Scoped CSS
As CSS solutions (e.g. styled-components and emotion) are often used to scope CSS in React (unless you spread components across multiple files). Component-based styling allows for a new authoring paradigm that’s different from standard CSS.
If you’re a fan of CSS-in-JS, you’ll be pleased to know that many popular CSS-in-JS libraries support Vue (like styled-components-vue and vue-emotion). Vue differs from React here in that it employs style tags through single-file components as the default method of styling.
CSS code can be found in the same file as the rest of the component code in single-file components.
With the optional scoped attribute, this CSS is automatically scoped to your component by adding unique attributes (such as data-v-21e5b78) to elements, resulting in something like .list-container[data-v-21e5b78]:hover.
Furthermore, Vue’s single-file components feature very flexible styling. Various preprocessors, postprocessors, and even CSS Modules can be used within the *style> element.
Scale
Scaling Up
Neither Vue nor React fail to provide robust routing for large applications. In addition, React has been highly innovative in terms of state management solutions (e.g. Flux/Redux). Vue applications can easily integrate these state management patterns and Redux itself. Our state management solution, Vuex, is inspired by Elm and seamlessly integrates into Vue. We believe that it offers the best development experience of any state management option.
In addition to the vastly different offerings, Vue’s companion libraries for state management and routing (as well as other matters) all receive official support and are updated on a regular basis. This leaves the community to address these concerns, resulting in a fragmented ecosystem. The ecosystem around React is richer because it’s more popular 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 for Creating an instant prototype of a component. React is also making strides in this area with create-react-app, but it currently has a few limitations:
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.
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.
Scaling Down
Learning React can be challenging. Since React’s class syntax is used in many examples, you’ll need to learn JSX and possibly ES2015+ before you can really get going. Furthermore, you need to learn about build systems, because although you can technically live-compile your code in the browser using Babel Standalone, this is not suitable for production.
Scaling up with Vue is just as good as scaling down with React. Getting started is as easy as dropping a single script tag into the page:
Once this step has been achieved, you can begin writing Vue code and even ship the minified version to production without feeling guilty.
The guide is designed so that developers do not need to know anything about JSX, ES2015, or build systems in order to be able to learn enough to build non-trivial applications in under a day.
Native Rendering
With React Native, you can create native-looking apps for iOS and Android with the same React component model. It is great that you can apply your knowledge of a framework across multiple platforms as a developer.for developers. The Apache Software Foundation (ASF) has officially teamed up with Alibaba Group’s cross-platform UI framework Weex. By using Weex’s Vue component syntax, you can not only author components for web use, but you can also create native iOS and Android apps!
Vue’s team will actively collaborate with the Weex team to ensure a smooth experience for Vue developers, although Weex is not as mature and battle-tested as React Native yet.
NativeScript-Vue is another option for building truly native applications using Vue.js and NativeScript.
Utilizing MobX
It uses a nearly identical reactivity system to Vue, which has made it quite popular in the React community. It is possible to think of React + MobX as a more verbose version of Vue, so if you are getting good results with that combo, moving to Vue might be a logical next step.
Libraries like React and Preact
There is a general trend for React-like libraries to create as many APIs and ecosystems as possible. The comparisons can be applied to them too, in light of this. A smaller ecosystem is typically present in React than in React. Because some libraries and tooling aren’t 100% compatible with React, they might not be compatible with certain tooling and companion libraries. Even if your React-like library appears to work, it could stop working at any time unless they are officially supported.
AngularJS (Angular 1)
It will appear that some of Vue’s syntax looks very much like AngularJS (for example, v-if vs ng-if). Vue was influenced very early in its development by many of the things that AngularJS did right. However, AngularJS comes with many pains where Vue offers a major improvement.
Complexity
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.
Flexibility and Modularity
The application framework named Vue is an alternative to the AngularJS framework, which has a strong opinion about the structure of your applications. Although this makes Vue more adaptable to a wide variety of projects, we also recognize that sometimes it’s useful to just have some decisions made for you so that you can get started that it can be helpful in some cases to have some decisions already made for you.
We offer a complete system for rapid Vue.js development. In order to establish a standard baseline for Vue CLI tools, it has been created. So you can focus on writing your app, instead of spending hours configuring build tools, it ensures the various tools work smoothly together, with sensible defaults. However, it still allows you to customize each tool to meet your specific needs.
Data binding
The data flow between components in Vue is one-directional, while the data flow between scopes in AngularJS is two-directional. This makes it easier to reason about the flow of data when dealing with nontrivial applications.
Directives versus components
The directives and components are clearly separated in Vue. A directive encapsulates only DOM manipulations, while a component is a self-contained unit with its own view logic and data. Directives do everything in AngularJS, and components are just one type of directive.
Performance during runtime
Since it does not use dirty checking, Vue has better performance and is easier to optimize. Watchers make AngularJS slow because every time anything in the scope changes, all these watchers need to be re-evaluated. In addition, the digest cycle may have to run multiple times to “stabilize” if some watcher triggers another update. In some cases, AngularJS users are forced to resort to esoteric techniques to get around the digest cycle, and in others, there is no way to optimize a scope with many watchers.
It is not a problem for Vue since it uses an async queueing system that allows the observation of dependency relations. All changes trigger independently unless they are explicitly related.
Vue and AngularJS approach these AngularJS issues similarly.
Angular (Formerly known as Angular 2)
This new framework is a completely different framework compared to AngularJS and so it deserves its own section. The API was also substantially changed, and it features a first-class component system and many other details that have been completely rewritten.
TypeScript
The learning resources and documentation for Angular are based almost exclusively on TypeScript. The use of static type checking in TypeScript has many advantages
for large-scale applications and can boost productivity for developers with backgrounds in Java and C#.
TypeScript, however, is not for everyone. It may be more of an overhead than a productivity gain to introduce a type system in many smaller-scale use cases. Vue will be a better option in those cases, as Angular without TypeScript can be difficult.
For those who want to use TypeScript with Vue, it also offers official typings and an official decorator, although less deeply integrated than Angular is. VSCode and TypeScript teams at Microsoft are also actively working on improving the Vue + TS TS/IDE experience.
Runtime Performance
On benchmarks, both frameworks perform extremely well. The most deciding factor for speed is likely to be the specific metrics you browse, not the overall rankings.
Size
Due to its AOT compilation and tree-shaking, Angular’s size has been reduced significantly in recent versions. The weight of a full-featured Vue 2 project with Vuex + Vue Router included (*30KB gzipped) is still quite a bit lower than a standard Angular CLI application (~65KB gzipped).
Flexibility
There are fewer rules associated with using Vue than Angular. The framework includes official support for a variety of build systems, with no constraints on the way you structure your application. It is a great advantage for many developers knowing that they can build any application however they choose.
Learning Curve
All you need to get started with Vue is familiarity with HTML and plain JavaScript (ES5 JavaScript). Within a few hours after reading the guide, you can start developing non-trivial applications.
It’s much harder to learn Angular. In order to get productive with this framework, you will have to master a lot of concepts not covered by the API surface. The complexity of Angular is largely due to its design goal of targeting only large, complex applications. As a result, it is harder for new developers to get to grips with than older frameworks.
Ember
An embedded framework is a fully-featured tool designed for high opinionated usage. When you become familiar with the established conventions, it is very productive once you know how to use them. It does, however, mean a high learning curve and limited flexibility. A framework with an opinionated approach is better than a library with loosely coupled tools. In the latter case, you’ll have more freedom, however, as you will have to make more architectural decisions.
Nevertheless, it would probably be better to compare Vue core and Ember’s templating and object model layers:
The reactivity of the framework is unobtrusive and its properties are dynamically updated. To create computed properties in Ember, you’ll need to wrap everything in Ember Objects.
Handlebars’ expression and helper syntax is intentionally limited as compared to VUE’s template syntax which harnesses the full power of JavaScript expressions.
Even after Ember 3.x’s latest Glimmer engine update, Vue still outperforms Ember in terms of performance.
Knockout
Vue’s reactivity system is very similar to that of Knockout, which pioneered MVVM and dependency tracking. With support going back to IE6, its browser support is also very impressive considering all that it does. IE9+ is the only browser supported by Vue.
As time has passed, Knockout’s development has slowed, and it is beginning to show its age. In particular, Vue’s component system lacks a full set of lifecycle hooks, and although passing children to a component is typically required, the interface feels clunky compared to Vue’s.
The API designs also seem to differ philosophically, as shown by the way each deals with creating a simple to-do list. Vue’s API is considered by many to be simpler and better structured than other APIs.
Polymer
This project was also sponsored by Google. Polymer inspired Vue as well. In terms of development style, Visual’s elements can be compared to Polymer’s custom elements. The main difference is that Polymer uses the latest Web Components features, which need to be polyfilled in non-web browsers (leading to degraded performance). Vue, however, does not require any polyfills or dependencies up until IE9.
To compensate for Polymer’s performance, the team has also made its data-binding system very limited. In Polymer templates, the only expressions supported are boolean negation and single method calls. Additionally, its computed property implementation isn’t very flexible.
Riot
The API in Riot 3.0 is minimal and beautifully designed and provides a similar component-based architecture (called a “tag” in Riot). The design philosophies of Riot and Vue are similar. In spite of its slightly higher weight, Vue offers some interesting advantages:
Performance improvements. AngularJS has the same performance issues as Riot since it traverses DOM trees rather than a virtual DOM.
Better tool support. Webpack and Browserify are officially supported by Vue, while Riot relies on community support for system integration.
