Vue JS Comparison with React and Angular

Vue JS

Vue 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.

Vue.js is a popular JavaScript front-end framework that was built to organize and simplify web development. The project focuses on making ideas in web UI development (components, declarative UI, hot-reloading, time-travel debugging, etc.) more approachable. It attempts to be less opinionated and thus easier for developers to pick up.


A. Structure

HTML:

<div id="app">



{{ message }}



</div>

Javascript:

var app = new Vue({



el: '#app',



data: {



message: 'Hello Vue!'



}



})

B. Template Syntax

Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance’s data. All Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers.

1. Text
The most basic form of data binding is text interpolation using the “Mustache” syntax (double curly braces):

HTML:



<span v-once>This will never change: {{ msg }}</span>

2. Raw HTML
The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use the v-html directive:

HTML:



<div v-html="rawHtml"></div>

3. Attributes
The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use the v-html directive:

HTML:



<div v-html="rawHtml"></div>


C. Comparison

1. React
In React, everything is just JavaScript. Not only are 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.

Both React and Vue offer comparable performance in most commonly seen use cases, with Vue usually slightly ahead due to its lighter-weight Virtual DOM implementation. If you are interested in numbers, you can check out this 3rd party benchmark which focuses on raw rendering/updating performance. Note that this does not take complex component structures into account, so should only be considered a reference rather than a verdict.

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

Code Example:

Hello World:
How React Does it:
How Vue Does it:
Iteration
How React Does it:

How Vue does it:



 2. AngularJS
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.

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.

Few codes which will give you some basic insights:

































Angularjs vs Vue.js vs Reactjs Table



Source:
https://vuejs.org/
https://jsfiddle.net/chrisvfritz/50wL7mdz/
https://en.wikipedia.org/wiki/Vue.js
https://www.valuecoders.com/blog/technology-and-apps/vue-js-comparison-angular-react/

Komentar

Posting Komentar