Shulou(Shulou.com)06/03 Report--

This article is about the differences between react and vuejs. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Differences: 1, vue is bidirectional binding, react is not; 2, React uses JSX,Vue to create views using HTML template; 3, React uses Flux to manage state, Vue uses Vuex;4, React uses Create React App scaffolding, Vue uses vue-cli.

The operating environment of this tutorial: windows7 system, vue2.9.6&&react16 version, DELL G3 computer.

Comparison between React.js and Vue.js

ReactVue type JavaScript library JavaScript library ideal for Web and Native focus on Web development, but it is written to support the progress of other platforms Facebook community (created by Jordan Walke) Evan You first released React Native written into JavaScriptJavaScript cross-platform development React in March 2013 February 2014 is a mature and widely used native application platform Vue Weex is still growing The aim is to provide a smooth development experience, a steep learning curve, which requires deep knowledge and a simple learning curve. HTML-based templates make it familiar with popularity. React ranks second on the list of the most popular Javascript projects on GitHub, Vue.js ranks first, and is the most fashionable project in 2017. During the year, more than 40000 stars were added to GitHub for reusability only CSS maximum reusability performance is as fast as the same fast contributor 1201189 model virtual DOM (document object model) virtual DOM HTML-based template function can be used as a basis for single-page or mobile application development Web application framework that can power advanced single-page applications simple React is more complex than Vue Vue is more complex than React Simple and noteworthy features use props for one-way data binding stateful components virtual DOM lifecycle method JSX (JavaScript XML) HTML architecture based on HTML template reactive components (divide the entire application into small Self-contained, usually reusable components) conversion routing * Integration of Bootstrap applications CRA (creating React applications) differences between Vue-clireact and vuejs 1, data binding

The section on data binding in Vue

Vue is bidirectional binding. There are two core functions of Vue.js, one is responsive data binding system, the other is component system. The so-called bi-directional binding means that the data in the vue instance is consistent with the content of the rendered DOM element, no matter who is changed, the other party will be updated to the same data accordingly. This is done by setting up a property accessor.

In vue, there are interpolation expressions, instruction sets, * Class and Style, event handlers and form spaces, ajax requests and evaluation properties related to data binding

React does not have two-way data binding

React is a unidirectional data stream

In react, the state (Model layer) and view layer data are bidirectionally bound to achieve real-time data update changes. Specifically, the data in the JS layer is directly written in the View layer and rendered. Once the data changes are triggered, such as form operations, trigger events, ajax requests, etc., double synchronization is carried out.

2. Re-render and optimize

When you compare React and Vue, speed is not an important factor in determining which is better. In terms of performance, let's consider the re-rendering feature. When the state of a component changes, the mechanism of React triggers the re-rendering of the entire component tree. You may need to use additional attributes to avoid rerendering the subcomponents unnecessarily.

Although Vue's re-rendering feature is available out of the box, Vue provides optimized re-rendering, where the system tracks dependencies and works accordingly during rendering.

Re-rendering Vue is the most striking feature making it a framework widely accepted by developers around the world.

3. JSX and HTML

React uses JSX, a declarative JavaScript XML that allows developers to write components that take advantage of the power of JavaScript, while Vue.js uses HTML templates to create views.

HTML-based templates are more familiar and useful in improving existing applications to reap the benefits of Vue reactive capabilities. This provides a simple learning curve for beginners and experienced professionals, as most of them use HTML in one way or another.

4. Routing and state management solutions

In component-based frameworks like React and Vue, when you start to extend your application, you need to pay more attention to state management and data flow. This is because there are many components that interact with each other and share data.

In this case, React provides an innovative solution called Flux / Redux architecture, which represents one-way data flow and is an alternative to the well-known MVC architecture. Now, if we consider the Vue.js framework, there is a more advanced architecture called Vuex that integrates into Vue and provides an unparalleled experience.

5. Construction tools

Both React and Vue have a very good development environment. With little or no configuration, you can create applications that enable you to use the latest practices and templates. In React, there is a Create React App (CRA), and in Vue, it is vue-cli.

Both bootstrap tools tend to provide you with a comfortable and flexible development environment and an excellent starting point for starting coding.

Thank you for reading! This is the end of the article on "what are the differences between react and vuejs". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.