前端框架大比拼：2022年的Vue与React谁更胜一筹？

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第 18 天，点击查看活动详情

前端框架经历了十多年的争奇斗艳百花齐放，经历了 JSP、jQuery、Ember、Angular、React、Vue、Solid、Svelte 等等。如今所有人都要承认的一个事实是：在上百个前端框架中，最具影响力的只剩下了两个，Vue 与 React。
Vue 进入 3.x 时代已经将近 2 年了，React 也在今年 3 月 29 日发布了 React 18 版本。
今天就来聊聊在当今 2022 年，两者还有哪些区别。
下面我们从头开始对比它们，看看到底谁更胜一筹。

安装与启动

从两个框架的安装开始。

Vue

Vue 提供了 Vue CLI 创建 Vue 项目，安装命令如下：

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

安装成功后可以通过查看版本来确定安装成功。

vue --version
复制代码

创建新的项目运行以下命令：

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

React

创建 React 项目的工具是 create-react-app，简称 CRA。

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

创建新的项目运行以下命令：

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

结论

两者在安装和启动项目上几乎一致，平手。

Props

两个框架都是使用组件作为基础开发的，那么父子组件传值就成了一个问题。props 是将数据从父组件传递给子组件的关键技术。

Vue

在 Vue 中，props 使用普通的字符串传递。也可以通过 v-bind 指令传递变量，缩写是冒号（:）。
父组件传值：

复制代码

子组件访问 props 需要使用 defineProps 函数：

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

React

在 React 中，props 是通过花括号传递变量的。
父组件传值：

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

子组件通过参数的方式获取 props：

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

结论

在传递 props 时，Vue 需要在属性前面额外添加指令，如果忘记添加指令会导致传递字符串。React 则不会有这种情况。
在子组件取值时，Vue 需要调用 defineProps 函数，React 通过函数的参数获取，更加自然。
综合对比，Vue 心智负担更大，React 则更加自然。这一轮 React 胜。

Event

Vue 使用了模板语法，React 使用了 JSX 语法。所以在编写 HTML 上发生了变化。但我们仍然需要为元素添加鼠标事件、键盘事件等。事件的处理也是一个必须事情。

Vue

Vue 处理事件通过 v-on 指令完成的，简写是 AT 符号（@）。