Front-end framework competition: who is better than Vue or React in 2022?

Work together to create and grow together! This is the 18th day of my participation in the "Nuggets Daily New Plan · August Update Challenge", click to view the details of the event

The front-end framework has experienced more than ten years of competition, and has experienced JSP, jQuery, Ember, Angular, React, Vue, Solid, Svelte and so on. A fact that everyone has to admit today is that among the hundreds of front-end frameworks, only two are left with the most influence, Vue and React.
It has been nearly 2 years since Vue entered the 3.x era, and React also released the React 18 version on March 29 this year.
Today, let's talk about the difference between the two in today's 2022.
Let's compare them from the ground up to see who is better.

Install and start

Start with the installation of both frames.

Seen

Vue provides Vue CLI to create a Vue project. The installation command is as follows:

npm install -g @vue/cli
复制代码

After the installation is successful, you can check the version to confirm the installation is successful.

vue --version
复制代码

To create a new project run the following command:

vue create project
cd project
npm run serve
复制代码

React

The tool for creating React projects is create-react-app, or CRA for short.

npm install -g create-react-app
复制代码

To create a new project run the following command:

npx create-react-app project
cd project
npm run start
复制代码

in conclusion

The two are almost identical in terms of installation and startup projects, and are tied.

Props

Both frameworks are developed using components as the basis, so passing values ​​between parent and child components becomes a problem. Props are the key technique for passing data from parent components to child components.

Seen

In Vue, props are passed as normal strings. Variables can also be passed via the v-bind directive, abbreviated as a colon (:).
Parent component pass value:

<template>
  <Modal :isOpen="open" title="创建项目" />
</template>
复制代码

Subcomponent access to props requires the use of the defineProps function:

<template>
  <form v-if="isOpen">
    <p>{
   
   { title }} </p>
  </form>
</template>

<script setup>
  const props = defineProps({
    isOpen: Boolean,
    title: String
  });
</script>
复制代码

React

In React, props are passed variables through curly braces.
Parent component pass value:

<Modal isOpen={open} title="创建项目" />
复制代码

Subcomponents get props through parameters:

function Modal({ isOpen, title }) {
  return (
    {isOpen &&
     <form>
        <p>{ title }</p>
      </form>
  );
}
复制代码

in conclusion

When passing props, Vue needs to add additional directives in front of the properties, if forgetting to add directives will result in passing a string. React doesn't do that.
When the child component takes the value, Vue needs to call the defineProps function, and React obtains it through the parameters of the function, which is more natural.
In a comprehensive comparison, Vue has a greater mental burden, while React is more natural. React wins this round.

Event

Vue uses template syntax and React uses JSX syntax. So there was a change in writing HTML. But we still need to add mouse events, keyboard events, etc. to the element. Event handling is also a must.

Seen

Vue handles events through the v-on instruction, the abbreviation is the AT symbol (@).

<template>
    <button @click="displayName"> Show Name </button>
<template>

<script setup>
    function displayName() {
      // TODO
    }
</script>
复制代码

React

The way React creates events is almost the same as native HTML, the difference is that the attribute names of the bound events are required to be camelCase.

function NameAlert() {
    const displayName = () => {
      // TODO
    }
    return (
        <button onClick="displayName"> Show Name </button>
    );
}
复制代码

in conclusion

React is more natural, Vue still needs additional operators, if you forget to add operators, it will become props passing strings, React does not have this problem. React wins this round.

State

Both are data-driven reactive frameworks, then managing state becomes a key issue.

Seen

In Vue, state is created by ref or reactive.
The usage of the two is slightly different, ref is used to deal with the state of the underlying type, and reactive usually deals with the state of the reference type.
When using ref state, you need to access the state through ref.value.

<template>
  <div>
    <p>{
   
   { firstname }}</p>
    <p>{
   
   { lastname }}</p>
  </div>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  
  const firstname = ref('张');
  console.log(firstname.value);

  const lastname = reactive('三');
  console.log(lastname);
</script>
复制代码

The methods to monitor a state change are watch and watchEffect.
The difference between the two is that watchEffect will initially run once.

import { watch, watchEffect } from 'vue';

watch(firstname, () => alert('firstname 改变了！');

watchEffect(lastname, () => alert('lastname 改变了！');
复制代码

React

React uses useState to create state.

import { useState } from 'react';

function ShowName() {
  const [firstName, setFirstName] = useState('张');
  const [lastName, setLastName] = useState('三');

  console.log(firstName, lastName);

  return (
    <div>
      <p>{ firstname }</p>
      <p>{ lastname }</p>
    </div>
  )
}
复制代码

React uses the useEffect Hook to listen for state changes. This Hook accepts a callback function and an array of dependencies. When any state of the dependency array changes, the callback function will be triggered.

import { useEffect } from 'React';

useEffect(() => {
  console.log('名字改变了!');
}, [firstName, lastName]);
复制代码

in conclusion

Vue provides a variety of ways to create and monitor states. We need to consider which API to use in which case when using it. React only provides one way, but it can also handle various situations. . In a comprehensive comparison, Vue has a higher mental burden and React is simpler. React wins this round.

Ref

Although both frameworks use components for programming, we inevitably need to access the DOM, such as adding animations, controlling input box focus, and so on. To solve this kind of problem, both frameworks provide the concept of ref, which can be used to create a reference to the DOM.

Seen

Vue provides the ref API.

<template>
  <div>
    <input type="text" ref="name" />
    <button @click="handleBtnClick"> 开始输入 </button>
  </div>
</template>

<script setup>
  import { ref } from 'vue';

  const name = ref(null);

  handleBtnClick(() => {
    name.value.focus();
  }
</script>
复制代码

React

React provides the useRef Hook. But to access the DOM, you need to use the ref.current property.

import { useRef } from 'react';

function MyName() {
  const name = useRef(null);

  handleBtnClick(() => {
    name.current.focus();
  });

  return (
    <input type="text" ref="name" />
    <button onClick={handleBtnClick}> 开始输入 </button>
  )
}
复制代码

in conclusion

There's almost no difference, flat.

two-way data binding

When we use elements such as input, select, and textarea, the input value needs to be synchronized with the state. When the state changes, the value of the element should also be synchronized. This feature is called data two-way binding.

Seen

Vue provides the v-model directive to create two-way bindings.

<template>
  <input v-model="searchQuery" />
</template>

<script setup>
import { ref } from 'vue';

const searchQuery = ref('');
</script>
复制代码

React

React doesn't provide a separate API for this functionality, but we can.

import { useState } from 'react';

function MyComponent() {
  [searchQuery, setSearchQuery] = useState('');

  const handleChange = (event) => {
     setSearchQuery(event.target.value);
  }

  return (
    <input value={searchQuery} onChange={handleChange}/>
  );
}
复制代码

in conclusion

Syntactically, Vue is more concise. But this breaks the principle of one-way data flow, because there is no longer only one way to change data. React's code, while less concise, makes it easier to keep track of state. This is also the difference in design philosophy between React and Vue. Between "let developers write less code" and "clearer and easier to maintain code structure", Vue chooses the former, and React chooses the latter. As for who is good and who is bad, individuals are more inclined to the latter, but some people are inclined to the former. Because it is a trade-off issue, Ping.

Dynamic rendering

Sometimes our components are rendered according to certain conditions, which is dynamic rendering.

Seen

Vue provides three directives: v-if, v-else and v-show.

<template>
  <div>
    <p v-if="isLoggedIn"> 欢迎 </p>
    <p v-else> 请登录 </p>
    <button v-show="!isLoggedIn">登陆</button>
  </div>
</template>
复制代码

React

React doesn't provide any API for this kind of functionality, but uses native JavaScript conditional statements like if, &&, or the ternary operator.

function MyComponent() {
  return (
    {isLoggedIn ? 
     <p>欢迎</p> :
     <p> 请登录 </p>
    }
    {!isLoggedIn && <button> 登陆 </button>}
  );
}
复制代码

in conclusion

Vue's syntax is to add special properties to elements, while React's syntax is pure JavaScript syntax. Syntactically, there is not much difference. But Vue will have additional learning costs. On the whole, this round of React is slightly better.

render child components

Sometimes we need to pass child components to other components to render together.

Seen

Vue provides slots to pass child components.
Container component:

<template>
  <div>
    <h1>Welcome</h1>
    <slot><slot>
  </div>
</template>
复制代码

Parent component:

<template>
  <div>
    <h1>欢迎来到我的网站</h1>
    <Modal>
        <input type="text" />
        <button>登陆</button>
    </Modal>
  </div>
</template>
复制代码

React

React's child component is a property on a props: children.
Container component:

function Modal( {children} ) {
  return (
    <div>
       <h1>Welcome</h1>
       { children }
    </div>
  );
}
复制代码

Parent component:

function UserPage() {
  return (
     <div>
     <h1>欢迎来到我的网站</h1>
      <Modal>
        <input type="text" />
        <button>登陆</button>
      </Modal>
    </div>
  );
}
复制代码

in conclusion

From the above example, there is not much difference between the two. But in more complex cases, like passing N child components. React can be passed through properties, and operating components are the same as operating variables; Vue has concepts such as named slots, slot dynamic names, and scoped slots, which are cumbersome to operate and have a high mental burden. React wins this round.

Summarize

Through this article, I have compared most of the concepts and syntax of the two frameworks, each has its own advantages, it is difficult to say which one is better.
As early as around 2016, when I first compared the two, I felt that the gap was quite large. At that time, React was still in the era of class components, and this.setState was needed to update the state, and the components also had a lot of complex life. cycle. Vue is still in the era of Options API, and it is not very easy to use, such as the problem of this; data must pass a function and return an object; everything must be defined, using components to define, using events to define... Let's
see React and Vue today seem to be moving in the same direction, and more and more like.
Although there are elements of mutual learning, there has been a skeptical voice a few years ago, saying that Vue copied React. Especially after Vue3 launched the Composition API, it became more and more like React. Some people even say that the code name of Vue3 One Piece is a metaphor for stealing a lot of things from React.
what you think?

 

 Summarize and recommend a practical interview question bank for everyone

 1. Front-end interview question bank ( required for interview) Recommended: ★★★★★            

Address: Front-end interview question bank

2. Recommended front-end technology navigation      : ★★★★★

Address: Front-end Technology Navigation Daquan

3. Recommended color value conversion tools for developers    : ★★★★★

Address: Developer Color Value Conversion Tool