Similarities and differences of Vuejs and Reactjs and Angularjs _javascript skills

React && Vue

There are many similarities between react and Vue, all of which are:

• Using the Virtual DOM
• Provides a responsive (reactive) and modular (composable) View component.
• Keep your focus on the core library, along with the accompanying Routing and Libraries responsible for handling global state management.
  

As there are many similarities, we will spend more time comparing this piece. Here we not only guarantee the accuracy of the technical content, but also balance the consideration. We need to point out that react are better places than Vue, like their ecosystems and rich custom renderer.

Performance of React && vue

Rendering performance

The DOM has the highest operating cost when rendering the user interface, and unfortunately no library can make these original operations faster.
The best we can do is (source Google):

Minimize the number of necessary DOM mutations. Both react and Vue use virtual DOM abstractions to accomplish this and Both implementations about work.

Add as little overhead (pure JavaScript computations) as possible on the top of those DOM manipulations. This is a area where Vue and react differ.

The JavaScript overhead is directly related to the mechanisms of computing the necessary DOM operations. Both Vue and react utilizes virtual DOM to achieve this, but Vue ' s Virtual DOM implementation (a fork of snabbdom) is very much Lighter-weight and thus introduces less overhead than ' s.

Update performance

In react, where a component ' s state changes, it triggers the re-render of the entire component sub-tree, starting at that C Omponent as Root.

To avoid unnecessary re-renders of the child components, for need to implement shouldcomponentupdate-everywhere and use Immuta BLE data structures. In Vue, a component ' s dependencies are automatically tracked during its render, so the system knows precisely which compon Ents actually need to re-render.

In other words, the Vue is much faster than the react without optimization. Because Vue improves rendering performance, even fully optimized react are often slower than out-of-the-box Vue.

JSX vs Templates

In react, all of the components ' rendering functionality relies on JSX. JSX is a syntactic candy that uses XML syntax to write Javascript.

Render () {Let
  {items} = this.props Let
  children
  if (items.length > 0) {
    children = (
      <UL&G t;
        {Items.map (item =>
          <li key={item.id}>{item.name}</li>
        )}
      </ul>
    )
  } else {
    children = <p>no items found.</p>
  } return
  (
    <div className = ' List-container ' >
      {children}
    </div>
}

The JSX rendering features have the following advantages:

You can use the Full programming language JavaScript feature to build your view page.
Tool support for JSX is more advanced than other Vue templates available (e.g., linting, type Checker, editor AutoComplete).

In Vue, Vue also provides rendering capabilities and supports JSX because of the sometimes need for these features. However, rendering functionality is deprecated for most components.
In this context, Vue provides a simpler template:

<template>
  <div class= "List-container" >
    <ul v-if= "Items.length" >
      <li v-for= "item In Items ' >
        {item.name}}
      </li>
    </ul>
    <p v-else>no items found.</p>
  </div>
</template>

The advantages are as follows:

In the process of writing a template, style has been set and involves less functional implementations.
The template will always be declared.
Any HTML syntax in the template is valid.
Read more in English (for example, for each item in items).
The advanced version of JavaScript syntax is not required to increase readability.
It's not over yet. Vue embrace HTML instead of using JavaScript to reshape it. Within the template, Vue also allows you to use preprocessor such as Pug (formerly known as Jade)

Div.list-container
 ul (v-if= "Items.length")
  li (v-for= "item in Items") {{item.name}}
 P (v-else) No Items found.

Angular && Vue

Some of Vue's syntax is similar to angular's (for example, V-if vs ng-if). According to Vue developers, angular was a source of inspiration for Vue's early development. However, many of the problems that exist in Augular have been resolved in Vue

Complexity

Both API and design vue.js are much simpler than angular 1, so you can quickly grasp all of its features and put it into development.

Flexibility and modularity

Vue.js is a more flexible and open solution. It allows you to organize your application in a way that you want, not at all times by following the rules set by angular 1, which allows Vue to apply to a variety of projects. We know it is necessary to give you the right to decide.
That's why we offer webpack template, so that you can use a few minutes to choose whether to enable advanced features such as thermal module loading, linting, CSS extraction, and so on.

Data binding

Angular 1 uses two-way binding, Vue enforces one-way data flow between different components. This makes the data flow in the application clearer and easier to understand.

Directives and Components

The instructions and components are more clearly divided in the Vue. The instruction encapsulates only DOM operations, and the component represents a self-contained self-contained unit--with its own view and data logic. There are a lot of mixed places in the angular.

Performance

Vue has better performance and is very, very easy to optimize because it does not use dirty checks.

In angular 1, when watcher becomes more and more slow, because every change in the scope, all watcher are recalculated. Also, if some watcher trigger another update, the Dirty Check Loop (Digest cycle) may run several times. Angular users often use esoteric techniques to solve the problem of dirty check loops. Sometimes there is no easy way to optimize the scope of a large number of watcher.

Vue does not have this problem at all because it uses an observation system based on dependency tracing and asynchronous queue updates, all data changes are triggered independently unless there is a clear dependency between them.

Interestingly, angular 2 and Vue used similar designs to solve some of the problems in angular 1

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.