How to compare and analyze the three mainstream web front-end frameworks

The comparison is as follows: 1. Vue, the APIs provided are relatively simple and intuitive, using DOM templates; 2. Angular, relying on dirty checking of data, the more Watchers, the slower; 3. React, using special JSX syntax, the Virtual DOM used will perform dirty checks on the rendered results.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

MVX Framework Pattern: MVC MVP MVVM

1.MVC: Model (Model) View (View) Controller (Controller), mainly based on the purpose of layering, to separate each other's responsibilities .

View communicates with Model through Controller. Controller is the coordinator of View and Model. View and Model are not directly connected, and the basic communication is one-way.

User operates the template Model through the controller to achieve changes in the view.

2.MVP: It evolved from the MVC model, and the Controller/Presenter is responsible for logical processing. The Model provides data and the View is responsible for display.

In MVP, Presenter completely separates View and Model, and the main program logic is implemented in Presenter.

Furthermore, Presenter and View are not directly related. They interact through a defined interface, so that the Presenter can remain unchanged when the View is changed.

MVP model framework: Riot, js.

3.MVVM: MVVM changes the Controller in MVC and the Presenter in MVP to ViewModel. Model View ViewModel.

Changes in View will be automatically updated to the Model, and changes in the Model will also be automatically synchronized to the View for display.

This automatic synchronization is because the properties in ViewModel implement Observer, and corresponding operations can be triggered when properties change.

What is Vue.js?

After seeing the above introduction to the framework pattern, we can know that it is a framework belonging to the MVVM pattern. So what are its characteristics?

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

Vue.js provides efficient data binding and a flexible component system through a simple API (Application Programming Interface).

The features of Vue.js are as follows:

1. Lightweight framework

2. Two-way data binding

3. Instructions

4. Plug-in

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

1. Differences from AngularJS

Same points:

Both support instructions: built-in instructions and custom instructions.

Both supports filters: built-in filters and custom filters.

all support two-way data binding.

does not support low-end browsers.

Differences:

1. AngularJS has a high learning cost, such as the addition of the Dependency Injection feature, while the APIs provided by Vue.js itself are relatively simple and intuitive.

2. In terms of performance, AngularJS relies on dirty checking of data, so the more Watchers, the slower it becomes.

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

For huge applications, this optimization difference is quite obvious.

2. Differences from React

Similar points:

React uses special JSX syntax, and Vue.js also recommends writing .vue special file format in component development. There are some conventions on file content, and both need to be compiled before use.

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

all provide reasonable hook functions, allowing developers to customize their needs.

does not have built-in column number AJAX, Route and other functions into the core package, but is loaded as a plug-in.

Supports the features of mixins in component development.

Difference:

React relies on Virtual DOM, while Vue.js uses DOM templates. The Virtual DOM used by React will perform dirty checks on the rendered results.

Vue.js provides instructions, filters, etc. in the template, which can operate the DOM very conveniently and quickly.

[Recommended learning: javascript advanced tutorial]

The above is the detailed content of How to compare and analyze the three mainstream web front-end frameworks. For more information, please follow other related articles on the PHP Chinese website!