Comparison between vue.js and react: Is react better or vue.js better?

vue.js and react are both JavaScript libraries, that is, frameworks. So which of the two frameworks, vue.js or react, is better? This article will tell you whether react is better or vue.js is better by comparing the vue.js framework and the react framework. Interested friends can take a look.

First of all, let’s take a brief look at the concepts of vue.js framework and react framework:

Vue is a progressive framework for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue's core library only focuses on the view layer, which is not only easy to get started, but also easy to integrate with third-party libraries or existing projects.

React is a declarative, efficient and flexible framework for building user interfaces.

The concepts of the two JavaScript frameworks vue.js and react are as mentioned above. From the comparison of concepts, it cannot be intuitively seen that react is better or vue.js is better. So, let’s start with Compare vue.js and react in several aspects.

First let’s take a look at the comparison between vue.js and react data binding

1. Vue data binding

In Vue, the View layer related to data binding includes interpolation expressions, command systems, Class and Style, event handlers and form controls. Ajax requests and calculated properties are also related to data changes. Let’s talk about it below. Let’s briefly look at these issues related to data binding.

Interpolation expression: In Vue, the operation of interpolation expressions and instructions on data is also called template syntax.

Instructions: Instructions in vue are very convenient. Instructions (Directives) are special attributes with v- prefix. Vue’s heavy instructions are probably learned from Angular. There are many similarities, but there are also Not exactly the same.

Class and Style: A common need for data binding is to manipulate an element's class list and its inline styles. Since they are all properties, we can use v-bind to handle them: we just need to evaluate the final string of the expression. However, string concatenation is cumbersome and error-prone. Therefore, Vue.js specifically enhances v-bind when used with classes and styles. In addition to strings, the result type of an expression can also be an object or an array.

Event processor: In Vue, we can register events for elements through v-on to complete event registration. The difference between event processing in Vue and the usual event processing is that it can bind data Handling functions, you can also use inline processors

Form controls: You can use the v-model directive to create two-way data bindings on form control elements. It automatically chooses the correct method to update the element based on the control type. The v-model* directive provided for form controls in Vue is very useful, and can easily return or set the information of the form control.

ajax data request: It is recommended to use axios for data requests in vue2.0

Computed properties: Computed properties are introduced in Vue to deal with putting too much logic in the template, which will make the template too heavy. And it is difficult to maintain. This not only solves the above problems, but also allows for a better separation of templates and business logic.

2. React data binding

In React, real-time updates and changes of data are achieved by bidirectional binding of state (Model layer) and View layer data. Specifically, That is to say, write JS code directly in the View layer to render the data in the Model layer. Once the data changes are triggered by form operations, trigger events, ajax requests, etc., two-way synchronization will be performed. Therefore, the characteristic of React is componentization.

Then let’s take a look at the comparison between vue.js and react components

1. React components and data flow

There are two ways to implement components in React, one is the createClass method, and the other is through the ES2015 ideological class inheritance React.Component.

There are two types of data communication between react components. The first is data communication between parent and child components. The second type is data communication between non-parent and child components.

Data communication between parent and child components:

In React, the data communication between parent and child is passed through the props attribute; while the child and parent The data communication between them can be done by defining events in the parent component. When the child component triggers the event in the parent component, it communicates by changing the data in the parent component in the form of actual parameters.

Data communication between non-parent-child components:

Non-parent-child components that are not deeply nested can use common parent components to trigger event functions and pass formal parameters way to achieve it; when the component level is very deep, here, React officially provides us with a context method that allows sub-components to directly access ancestor data or functions without passing data layer by layer from ancestor components to in child components.

Life cycle of react components:

construtor() //创建组件 
componentWillMount() //组件挂载之前 
componentDidMount() // 组件挂载之后 
componentWillReceiveProps() // 父组件发生render的时候子组件调用该函数 
shouldComponentUpdate() // 组件挂载之后每次调用setState后都会调用该函数判断是否需要重新渲染组件，默认返回true 
componentDidUpdate() // 更新 
render() //渲染，react中的核心函数 
componentWillUnmount() //组件被卸载的时候调用，一般在componentDidMount注册的事件需要在这里删除

2. Components and data flow in Vue

Vue The default is one-way data flow, which is directly stated by Vue. The parent component can pass data to the child component by default, but the child component needs additional settings to pass data to the parent component.

Data communication between parent and child components is achieved through Prop and custom events, while non-parent and child components can be implemented using the subscription/publish mode (similar to the communication between non-parent and child instructions in Angualr), and then If it is more complicated, it is recommended to use state management (vuex).

Life cycle of vue components:

Each Vue instance must go through a series of initialization processes before being created. For example, you need to set up data monitoring, compile templates, mount instances to DOM, update DOM when data changes, etc. At the same time, some functions called life cycle hooks will also be run during this process, giving users the opportunity to add their own code in some specific scenarios.

For example, the created hook can be used to execute code after an instance is created. There are also some other hooks that are called in different scenarios in the instance life cycle, such as mounted, updated, and destroyed. The hook's this points to the Vue instance that called it.

Let’s take a look at the comparison between vue.js and react routing

1. Routing in react

Routing in React only requires the installation of the plugin react-router. When used, the router Router is a component of React.

2. Routing in vue

Vue’s routing library and state management library are officially maintained and supported and updated synchronously with the core library; use Vue.js , we can already compose applications by combining components. When you want to add vue-router, what we need to do is map the components to routes, and then tell vue-router where to render them.

Finally let’s take a look at the comparison between vue.js and react state management

1. State management in react: Flux

Redux is the most popular Flux implementation in the React ecosystem. Redux is not actually view layer aware, so it can easily be used with Vue with some simple bindings.

2. State management in vue: vuex

vuex draws on Flux, Redux, and The Elm Architecture. Unlike other patterns, Vuex is a state management library specifically designed for Vue.js to take advantage of Vue.js's fine-grained data response mechanism for efficient state updates. This allows it to better integrate with Vue, while providing a concise API and improved development experience.

The core of every Vuex application is the store (warehouse). A "store" is basically a container that contains most of the state in your application.

This article ends here. Regarding whether react or vue.js is better, if you are a beginner, Vue is simpler and you can get started quickly. React and the idea of ​​full componentization and high cohesion. Low coupling and props are advantages, but if you don't play well, you will be cheated. If you play well, the size of the project will not be a problem, and there is also an active community, tool chain, best practices, etc. Of course, the most important thing is to see what you want to learn and which one is suitable for you.

The above is the detailed content of Comparison between vue.js and react: Is react better or vue.js better?. For more information, please follow other related articles on the PHP Chinese website!