Comparison between Angular React and Vue

Front-end technology has developed rapidly in recent years. When broken down, it can be divided into four aspects:

1.Development language technology, mainly ES6&7, coffeescript, typescript, etc. ;
2.Development framework, such as Angular, React, Vue.js, Angular2, etc.;
3.Rich development tools and front-end engineering, such as Grunt, Gulp, Webpack, npm, eslint, mocha and other technologies;
4.Expansion of front-end development scope, such as nodejs, express, koa, meteor, GraphQL on the server side; mobile and cross-platform PhoneGap, ionic, ReactNative, Weex; WebGL (three.js, etc.) in the field of computer graphics and 3D modeling; d3.js, etc. in the field of visualization and data analysis; including more new features and interfaces that browsers are constantly opening, such as svg, Canvas, Bluetooth, battery, local storage, service worker, Houdini and other new API capabilities, as well as underlying optimization technologies like WASM;

As far as development frameworks are concerned, Angular (1&2), React, and Vue currently occupy the It has a mainstream status and will remain so for a relatively long period of time, so here is a comparison of these three technologies to facilitate subsequent technology selection.

1 Data flow

Data binding

Angular uses two-way binding, that is: the operation of the interface can be reflected in the data in real time, and the changes in the data can be displayed in the interface in real time.

Implementation principle:

$scopeDirty value check is used in variables to implement. For example, ember.js is an observation mechanism based on setters and getters, and the

$scope.$watch function monitors changes in a variable. The function has three parameters, "what to observe", "what to happen when it changes", and whether you want to monitor a variable or an object.

When using ng-model, you can use two-way data binding.
Use $scope.$watch (view to model) and $scope.$apply (model to view), and $scope.$digest

When calling $scope.$watch, only one parameter is passed to it. No matter what changes in the scope, this function will be called. In ng-model, this function is used to check whether the model and view are synchronized. If not, it will update the model data with the new value.

Three important methods of two-way binding:

$scope.$apply()

$scope.$digest()

$scope.$watch()

In angularjs two-way binding, there are 2 very important concepts called dirty check, digest loop, dirty check (dirty detection) is used to check the bound scope The state of the object , for example, create an object in js and bind the object to the scope, so that the object is in the digest loop, and the loop finds out whether they have changed by traversing these objects , if changed, the corresponding processing method will be called to achieve two-way binding

Vue also supports two-way binding, the default is one-way binding, Data is passed from the parent component to the child component in one direction. Use one-way binding in large applications to make the data flow easier to understand.

The pros and cons of dirty detection

Compared with the getter/setter observation mechanism of ember.js and other technologies (excellent):
getter/setter is used every time When the DOM changes, it will modify the structure of the DOM tree, which has a great impact on performance. Angular will delay batch operations to one update, and the performance is relatively good.

Compared with Vue (inferior):

Vue.js has better performance and is very, very easy to optimize because it does not use dirty checking. Angular, will become slower and slower when there are more and more watchers, because all watchers must be recalculated for every change in the scope. Also, the dirty check cycle (digest cycle) may run multiple times if some watchers trigger another update. Angular users often have to use esoteric techniques to solve the problem of dirty checking loops. Sometimes there is no easy way to optimize when there are a large number of The scope of the watcher. Vue.js does not have this problem at all, because it uses an observation system based on dependency tracking and asynchronous queue updates. All data changes are triggered independently unless there are clear dependencies between them. relation. The only optimization needed is to use track-by on v-for.

React-One-way Data Flow

MVVM flow in Angular and Vue uses template-like syntax to describe the binding relationship between interface status and data, and then converts this through internal conversion The structure is established. When the interface changes, the corresponding data is updated according to the configured rules, and then the interface status is updated from the data according to the configured rules.

React advocates functional programming and one-way data flow: Given the original interface (or data), by applying a change, another state (interface or data) can be derived. renew).

Both React and Vue can cooperate with Redux to manage state data.

2 View rendering

Angular1

The working principle of AngularJS is: HTML template will be parsed into DOM by the browser, and the DOM structure becomes the input of the AngularJS compiler. AngularJS will traverse the DOM template to generate corresponding NG instructions. All instructions are responsible for setting data binding for the view (that is, ng-model in HTML). Therefore, the NG framework only starts to work after the DOM is loaded.

React

React's rendering is built on Virtual DOM - a data structure that describes the state of the DOM tree in memory. When the state changes, React re-renders the Virtual DOM and patches the real DOM after comparison and calculation.

Virtual DOM provides a functional method to describe the view. It does not use the data observation mechanism. Each update will re-render the entire application, so by definition the view and Data synchronization. It also opens up the possibility of isomorphic applications in JavaScript.

In terms of the first-screen rendering speed of very large amounts of data, React has certain advantages, because Vue’s rendering mechanism has more work to do when it starts. , and React supports server-side rendering.

React’s

Virtual DOM also needs to be optimized. In complex applications, you can choose 1. Manually add shouldComponentUpdate to avoid unnecessary vdom re-render; 2. Use pureRenderMixin as much as possible for Components, and then use Flux structure + Immutable.js. In fact, it is not that simple. In contrast, Vue uses dependency tracking, and the default is the optimization state: how much data is moved, how many updates are triggered, no more and no less.

React and Angular 2 both have server-side rendering and native rendering capabilities.

Vue.js does not use Virtual DOM but uses real DOM as template and data is bound to real nodes. The application environment of Vue.js must provide DOM. Vue.js sometimes performs better than React** and requires almost no manual optimization.

3 Performance and Optimization

In terms of performance, these mainstream frameworks should be able to easily meet the performance requirements of most common scenarios. The difference lies in the impact of optimizability and optimization on the development experience. For Vue, track-by needs to be added. React requires shouldComponentUpdate or full Immutable, Angular 2 requires manually specifying change detection strategy. From the overall trend,

browsers and mobile phones will continue to change faster and faster. The rendering performance of the framework itself will gradually fade in the entire front-end performance optimization system. More optimization points are still in the construction method, cache, and pictures. Loading, network links, HTTP/2 etc.

Four Modularization and Componentization

Angular1 -> Angular2

Angular1 uses dependency injection to solve the dependency problem between modules. Almost all modules depend on the injection container and other related functions. It is not loaded asynchronously. All dependencies required for the first load are listed according to the dependencies.

Can be used with something like Require.js to achieve asynchronous loading. Lazy loading (on-demand loading) is a solution with the help of ocLazyLoad, but ideally the local framework should Easier to understand.

Angular2 uses ES6 modules to define modules, and also considers the need for dynamic loading.

Vue

Instructions and components in Vue are more clearly separated. Directives only encapsulate DOM operations , while components represent a self-sufficient independent unit - with its own views and data logic**. There is a lot of confusion between the two in Angular1.

React

A React application is built on React components.
Components have two core concepts: props and state.
A component generates the HTML structure corresponding to this component in the render method through the values ​​of these two attributes.

Traditional MVC places the template in other places, such as script tags or template files, and then references the template in JS through some means. Along those lines, think about how many times we’ve been overwhelmed by template fragments scattered all over the place. Confused about the template engine, where the template is stored, and how to reference the template.

React believes that components are king, and components are closely related to templates. The separation of component templates and component logic complicates the problem. So there is the JSX syntax, which is to embed the HTML template directly into the JS code, so that the template and the component can be associated, but JS does not support this syntax that contains HTML, so Use tools to compile and output JSX into JS code before it can be used (the basis for cross-platform development, which is interpreted into code running on different platforms through different interpreters, so that RN and React can develop desktop clients) .

5 Syntax and coding style

React, Vue, and Angular2 all support ES6, and Angular2 officially embraces the JavaScript style of TypeScript.

React is JavaScript-centric, while Angular 2 remains HTML-centric. Angular 2 embeds “JS” into HTML. React embeds “HTML” into JS. Angular 2 follows Angular 1's approach of trying to make HTML more powerful.

The recommended approach for React is JSX + inline style, which means integrating HTML and CSS into JavaScript. Vue's default API aims to be simple and easy to use, but after advanced, it is recommended to use the single-file component format of webpack + vue-loader (template, script, style are written in a vue file as a component)

The above is the detailed content of Comparison between Angular React and Vue. For more information, please follow other related articles on the PHP Chinese website!