Talking about front-end development, nowadays there are lots of great frameworks (Angular, React, Ember, Polymer, Knockout, etc.) to help developers building powerful, scalable and performing pages. VueJS is one of them, but some of its features make it really, really good – and, to some extent, better than the others.
Don’t get me wrong. I don’t want to convince you that “VueJS is the way”, but there are some issues that it solves better than other frameworks.
Let’s start from the beginning. Vue is a powerful progressive framework, very helpfulto build user interfaces.
It is designed to be incrementally adoptable. Its core library focuses on the view layer only, so it’s easy to use and integrate with other libraries or existing projects.
On top of that, Vue is also perfectly usable for building sophisticated Single-Page Applications when is used with modern tooling and supporting libraries.
Let’s see some of the features that make Vue different from two of the most used frameworks.
Angular vs VueJS
There are some reasons why you should use Vue instead of Angular. Obviously, they may not be valid for everyone.
Vue is a more flexible solution that allows you to structure your app as you want, instead of being forced to do everything in “Angular mode”. It’s just an interface level so you can use it as an additional feature of your pages, rather than as a Single Page Application. It leaves you more room to integrate with other libraries, leaving you responsible for architectural decisions.
For example, the core of VueJS does not contain basic routing or ajax functionality, and generally assumes that you are building the application using an external bundler module. This is probably the most important distinction.
Angular uses the two-way binding. Vue also supports double-sided relationships, but predefined operation is a one-way, parent-child data flow between the components. Using the one-way link allows you to study more streamlined data in large applications.
VueJS performs better and is much easier to optimize because it does not use dirty checking. Angular slows down a lot when there are many watchers, because everytime something changes in the domains, all those observers need to be re-checked.
In addition to that, the digest cycle is performed several times to “stabilize” if some observer triggers other updates – so, in some cases, there just is no way to optimize a scope with large numbers of observers.
Vue does not suffer from this problem at all, because it uses an asynchronous queue tracking system – all changes are triggered independently unless they have explicit dependency relationships.
React vs VueJS
First of all, internal deployment is fundamentally different. React’s rendering uses Virtual DOM – a memory representation how the real DOM should appear. When a state changes, React makes a complete recalculation of the Virtual DOM, compares the differences and then builds the real DOM.
The virtual DOM approach provides a functional way of describing your view at any point in time, which is really nice. Due to the fact that it does not use observables and recalculates the entire app for each update, the view is by definition assured to be synced with the data.
Instead of a virtual DOM, Vue uses the real DOM as a template and keeps references to the actual nodes for data binding. This feature limits VueJS to environments where the DOM is present.
From 2.0 version, VueJS changed the DOM management passing from using Real DOM to adopting the Virtual DOM like ReactJS do. While in ReactJS when a component’s state changes, it triggers the re-render of the entire component sub-tree, in VueJS component’s dependencies are automatically tracked during its rendering, so the system knows precisely which components actually need to re-render when state changes.
In the API environment, a problem with React (or JSX) is that the computing function often involves a lot of CPU logic, and ends up to look more like a piece of code (which is, actually) than a visual representation of the interface. For some developers this is a plus, but for hybrid designers/developers, having a template makes it easier to think in terms of design and CSS. Vue pays the price of a lightweight data link DSL (Domain Specific Language) so that you have a visually scannable template with encapsulated logic and directives.
Another problem with React is that DOM updates are fully delegated to the virtual DOM. That is a bit complex if you need to control the DOM directly (although you can, if you do it you’re essentially roaming against the principle of the library itself). For applications that require custom DOM manipulations, like animations with special synchronization needs, this may be a particularly annoying restriction. On this front, Vue allows more flexibility – and there are numerous FWA/Awwwards winning sites built with VueJS.
The React team has very ambitious goals to make React an agnostic UI development platform paradigm, while Vue is more geared to providing a pragmatic solution to the web.
React, because of its functional nature, works very well with functional programming models. However, this also introduces a higher learning curve for young and beginner developers. Vue is much easier to learn and this makes it more productive in this regard.
For large applications, the React community has done a lot in terms of state control solutions, e.g. Flux / Redux. Vue alone does not aim to solve that problem (it is the same for the React core), but state management models can be easily adopted for a similar architecture. Vue has its own unique status management system called Vuex, and you can also use Redux with Vue.