What kind of experience is it like to switch to Vue after using React for four years?

The full text is 1,825 words, and the expected learning time is 5 minutes

Source: unsplash

For the past four years, I have been working with the React framework, and recently started using Vue. Although there are some conceptual differences between the two-Vue is influenced by Angular, but the work done under the React framework also applies to Vue.

I think Vue integrates the best parts of Angular and React. One of the key reasons is: You Yuxi, the creator of the Vue framework, used React to get inspiration and develop a new framework.

"I think, what if I only extract the favorite parts of React, without considering any other concepts, to build some lightweight frameworks? At the same time, I am also curious about how the internal implementation of React works. So I started trying to replicate this minimal feature set, such as declarative data binding. That’s how I started building Vue."-You Yuxi

What kind of experience is it like to switch to Vue after using React for four years?

This article will focus on the differences between the two frameworks. First, let's take a look at some facts:

What kind of experience is it like to switch to Vue after using React for four years?

Quick comparison

· React is the library, Vue is the complete framework

· Can run fast, all are lightweight front-end frameworks

· All have a component system architecture

· Both use virtual DOM

· Both can be put into an HTML file or become a more complex Webpack configuration 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 JavaScript libraries entirely. Vue also has mutable states and an automated system for re-rendering, which is called reactivity.

Component system architecture

Both React and Vue follow an approach based on reusable components.

· Compare React components and 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 components globally, and React.Component acts as the base class of components.

What kind of experience is it like to switch to Vue after using React for four years?

<ComponentName /> is a class name used directly in the template

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

What kind of experience is it like to switch to Vue after using React for four years?

The same components and patterns in Vue: <ComponentName/> is just an object, which must be included in the components value of the Vue application to be displayed.

Despite having a component-based approach, the two are quite different.

· 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 relies on HTML templates, 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 life cycle methods similar to React methods, try to pair them one by one:

· constructor → created

· componentWillMount → beforeMount

· componentDidMount → mounted

· componentWillUnmount → beforeDestroy

· componentDidCatch → N/A

· shouldComponentUpdate → N/A

· SetState → N/A — Set the attributes directly

Component status and data

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

Set initial state

What kind of experience is it like to switch to Vue after using React for four years?

React components

What kind of experience is it like to switch to Vue after using React for four years?

Vue components

update status

What kind of experience is it like to switch to Vue after using React for four years?

React uses the setState method

What kind of experience is it like to switch to Vue after using React for four years?

Vue just assigns the new value to the property

Conditional rendering

What kind of experience is it like to switch to Vue after using React for four years?

React usually uses ternary operations to render content under certain conditions

What kind of experience is it like to switch to Vue after using React for four years?

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

Iterate and render with loops

What kind of experience is it like to switch to Vue after using React for four years?

In React, you usually map the values and return a string that contains the desired value of each element.

What kind of experience is it like to switch to Vue after using React for four years?

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.

Chart

What kind of experience is it like to switch to Vue after using React for four years?

In short, both Vue and React are powerful tools for creating complex network solutions. They are enough for you to complete any task handily. Either one is the right choice.

What kind of experience is it like to switch to Vue after using React for four years?

Share the dry goods of AI learning and development together

Welcome to follow the full platform AI vertical self-media "core reading"

(Add the editor WeChat: dxsxbb, join the reader circle, and discuss the freshest artificial intelligence technology together~)

What kind of experience is it like to switch to Vue after using React for four years?

Guess you like