Why Vue?

The Vue.js library is gaining more and more popularity every day, although not everyone understands why Vue is, and in what particular cases, the latter can and should be used.



Technically, Vue.js is defined as a ViewModel layer of the MVVM pattern. It connects the model and the view in a two-way data binding. Current DOM changes and formatted output are abstracted in Directives and Filters.



The goal is to provide the advantages of fast data bindings and complex representations of components to the API, both simple and understandable. The library is not a full-scale framework, it is only a presentation layer. You can use it as a separate, for rapid prototyping of applications, or to mix and match with other libraries to customize the user interface.

')

Vular.js was significantly influenced by Angular, Knockout, React and Rivets. Despite the similarities, Vue.js can offer a valuable alternative to these existing libraries, looking for the golden section between simplicity and functionality.

What is the difference between Vue.js and Angular.js?

There are several reasons to use Vue.js instead of Angular, although not all of them can be applied to all projects:

1. Vue.js is more flexible, less straightforward in solution. This allows you to structure your application as you want, and does not force you to do it all as in Angular. Vue is only a presentation layer, so you can use it as an unobtrusive feature on the application page, instead of a full-scale framework. This gives you more options for combining Vue with other libraries, but you are also responsible for more architectural solutions. For example, the Vue.js kernel does not include routing or ajax functions out of the box, and usually assumes that you are building an application using an external module. This is probably the most important difference.
2. Vue.js is much simpler than Angular, both from an API point of view and a design point of view. You can learn almost all aspects of Vue.js quickly enough and start writing right away.
3. Vue.js has better performance because it does not use " dirty checking ". Angular becomes slower when many observers are used, because every time there is a change in scope, all of these observers need to be calculated again. Vue.js does not suffer from this, because it uses a transparent tracking system of observers, so all changes are triggered independently, if there are explicit related dependencies.

What is the difference between Vue.js and React.js?

1. React and Vue.js have a slight resemblance in that both support reactive and composable representations of components. However, the internal implementation is completely different. React is based on a virtual DOM — it presents in memory how the DOM actually looks. The data in React is largely unchanged, and DOM changes are calculated based on the determination of differences. In Vue.js, by contrast, data is changeable by default, and changed through events. Instead of a virtual DOM, Vue.js works directly with the DOM as a template, keeping references to existing nodes for linking.
2. A virtual DOM approach provides a functional way to describe your presentation at any time, which is very nice. Because the observer pattern is not used and the entire application is not redrawn with each update, the view by definition guarantees to be synchronized with the data, which also opens up possibilities for isomorphic JavaScript applications.
3. But the problem with using React is that your logic and presentation are closely intertwined. For some developers, this is a plus, but for designers / developers of hybrids, it is much easier to visualize a template in design and CSS. JSX merging with Javascript-logic breaks the visual model that is needed to display the code in the design. Vue.js, in contrast, pays for its lightweight directives, but you always have a visually presented template and encapsulated logic in the directives and filters.
4. Another React problem is that all updates are delegated to a virtual DOM, which is a little difficult when you actually need to control the DOM yourself (although theoretically it can, you should essentially work against the library when necessary). For applications that need hard-synchronized time animation, this can be a very annoying constraint. On this front, Vue.js is more flexible.

What is the difference between Vue.js and Polymer?

Polymer is another Google sponsored project that also inspired Vue.js. Vue components may be more loosely coupled than customized Polymer elements, but both provide a similar development style. The biggest difference is that Polymer is built on the latest features of web components, and also requires non-trivial polyfiles to work (which reduces performance) in browsers that do not support these new features. Vue.js, in contrast, works without any dependencies, up to IE9.

What is the difference between Vue.js and KnockoutJS?

First, Vue provides a cleaner syntax for getters and setters in VM properties.



At a higher level, Vue differs from Knockout in that the data in Vue is simple, less logically containing objects (such that you can directly use JSON.stringify and forward them after the request), and ViewModel simply provides an interface to access this data. A Vue VM instance always binds the source data to the corresponding DOM element. In Knockout, the ViewModel is essentially data, and the line between the model and the ViewModel layer is rather blurred. The lack of partitioning in Knockout will likely result in a confusing ViewModel.

---

In itself - the use of the library Vue.js is not reduced to a panacea . The library also has its bottlenecks and non-trivial solutions, but Vue definitely deserves attention when developing interactive user interfaces.

There are quite a few English-language educational materials on this library on the Internet, but there are also Russian-language lessons for mastering “honest MVVM”: ausite.ru