Angular Vue react web front-end three main framework comparison

First, let us first understand what is the MVX framework pattern?

MVX Frame mode: MVC+MVP+MVVM

1.mvc:model (model) +view (view) +controller (Controller), which is based primarily on layered purposes, separates each other's responsibilities.

View through the controller to contact model, Controller is the view and model of the Coordinator, view and model is not directly linked, basic contact is one-way.

User users can manipulate the template model to achieve changes in view views through controller controllers.

2.MVP: The evolution from the MVC pattern, all through controller/presenter responsible for the processing of logic +model provide data +view responsible for display.

In the MVP, presenter completely separates the view and the model, and the main program logic is implemented in presenter.

Also, presenter and view are not directly related, but interact through a well-defined interface, allowing the presenter to remain unchanged when the view is changed.

The framework of MVP mode: Riot,js.

3.MVVM:MVVM is to change the controller in MVC and the presenter in MVP into ViewModel. Model+view+viewmodel.

Changes to the view are automatically updated to Viewmodel,viewmodel and automatically synced to the view display.

This automatic synchronization is due to the fact that the attributes in the ViewModel implement the observer and can trigger the corresponding action when the property is changed.

The MVVM pattern has the following frameworks: Angularjs+vue.js and Knockout+ember.js, both of which are low-profile and early-morning frame patterns.

What is Vue.js?

Seeing the introduction of the framework schema above, we can see that it is a framework that belongs to the MVVM pattern. What are the characteristics of it?

In fact, Vue.js is not a framework because it focuses only on the view layer and is a library for building a data-driven Web interface.

Vue.js provides efficient data binding and flexible component systems through a simple API (application programming Interface).

The characteristics of Vue.js are as follows:

1. Lightweight framework

2. Bidirectional data binding

3. Directives

4. Plug-in

What is the difference between vue.js and other frameworks?

1. The difference from Angularjs

Same point:

All support directives: built-in instructions and custom directives.

Filters are supported: Built-in filters and custom filters.

Both support bidirectional data binding.

Low-end browsers are not supported.

Different points:

1.AngularJS has high learning costs, such as increased dependency injection features, and vue.js itself provides a simple and intuitive API.

2. In performance, ANGULARJS relies on dirty checking of data, so the more watcher the more slowly.

Vue.js uses dependency-tracking-based observations and uses asynchronous queue updates. All data is triggered independently.

For a large application, this optimization difference is still quite obvious.

2. The difference from react

Same point:

REACT uses special JSX syntax, vue.js in component development. Vue Special file format, there are some conventions on the contents of the file, both need to be used after compilation.

The main idea is the same: everything is a component, and the component instances can be nested between them.

Provide a reasonable hook function that allows the developer to customize the process to address the requirements.

Does not have the built-in column number Ajax,route and other functions to the core package, but the plug-in way to load.

The Mixins feature is supported in component development.

Different points:

React relies on the virtual DOM, and Vue.js uses a DOM template. The virtual DOM used by react will perform a dirty check on the rendered results.

Vue.js provides instructions, filters, and so on in the template, which makes it easy and quick to manipulate the DOM.

Angular Vue react web front-end three main framework comparison