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

This article mainly introduces "what is the difference between using React and Vue". In daily operation, I believe that many people have doubts about the difference between using React and Vue. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the question of "what is the difference between using React and Vue?" Next, please follow the editor to study!

Quick comparison

React is the library and Vue is the complete framework.

All can run quickly, and all are lightweight front-end frameworks.

All have a component system architecture.

All use virtual DOM

Can be put into a HTML file or become a more complex Webpack setting module

All have independent but universal routers and state management libraries.

The biggest difference is that Vue usually uses HTML template files, while React uses the JavaScript library entirely. Vue also has a mutable state and an automated system for re-rendering, which is called reactivity.

Component system architecture

Both React and Vue follow a reusable component-based approach.

(1) compare React components with Vue components

Both React and Vue provide component methods, but they are completely different. This is because React defines components as classes, while Vue defines components as objects. Vue.component registers the component globally, and React.Component acts as the base class for the component.

Is a class name that is used directly in the template

Components in Vue are ordinary objects and there is no need to extend Vue.

The same components and patterns in Vue: just an object that must be included in the definitions value of the Vue application to be displayed.

Although there is a component-based approach, the two are very different.

(2) compare React JSX and Vue Templates

React's renderProp method is the same as JavaScript, so everything you do in the template is the same as in JavaScript. Vue depends on the HTML template, so it contains some instructions. These instructions are very similar in design to AngularJS (in fact almost the same: v-if, v-for, v-show, etc.).

Life cycle approach

Components in Vue have a lifecycle approach similar to the React method, so try to match them one by one:

Constructor → created

ComponentWillMount → beforeMount

ComponentDidMount → mounted

ComponentWillUnmount → beforeDestroy

ComponentDidCatch → N/A

ShouldComponentUpdate → N/A

SetState → NCMA-just set the property directly

Component status and data

In React, there is a component state. In Vue, there is data.

Set the initial state

React component

Vue component

Update status

React uses the setState method

Vue simply assigns the new value to the property

Conditional rendering

React usually uses ternary operations to render content under certain conditions.

Vue introduces the v-if instruction, which has the same effect.

Iterate and render with a loop

In React, you usually map a value and return a string that contains each element value you want.

In Vue, v-for directive is used

ecosystem

Vue has more "official" libraries than React, which means it is officially supported, maintained, and released along with the core framework. Because it is not mature enough, Vue does not have as many community support libraries as React.

Comparison table

At this point, the study on "what is the difference between using React and Vue" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.