携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第 18 天，[点击查看活动详情](https://juejin.cn/post/7123120819437322247 "https://juejin.cn/post/7123120819437322247")
前端框架经历了十多年的争奇斗艳百花齐放，经历了 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 项目，安装命令如下： ```bash npm install -g @vue/cli ``` 安装成功后可以通过查看版本来确定安装成功。 ```bash vue --version ``` 创建新的项目运行以下命令： ```bash vue create project cd project npm run serve ``` ## React 创建 React 项目的工具是 create-react-app，简称 CRA。 ```bash npm install -g create-react-app ``` 创建新的项目运行以下命令： ```bash npx create-react-app project cd project npm run start ``` ## 结论两者在安装和启动项目上几乎一致，平手。 # Props 两个框架都是使用组件作为基础开发的，那么父子组件传值就成了一个问题。props 是将数据从父组件传递给子组件的关键技术。 ## Vue 在 Vue 中，props 使用普通的字符串传递。也可以通过 v-bind 指令传递变量，缩写是冒号（:）。
父组件传值： ```vue ``` 子组件访问 props 需要使用 defineProps 函数： ```vue ``` ## React 在 React 中，props 是通过花括号传递变量的。
父组件传值： ```jsx ``` 子组件通过参数的方式获取 props： ```jsx function Modal({ isOpen, title }) { return ( {isOpen && ); } ``` ## 结论在传递 props 时，Vue 需要在属性前面额外添加指令，如果忘记添加指令会导致传递字符串。React 则不会有这种情况。
在子组件取值时，Vue 需要调用 defineProps 函数，React 通过函数的参数获取，更加自然。
综合对比，Vue 心智负担更大，React 则更加自然。这一轮 React 胜。 # Event Vue 使用了模板语法，React 使用了 JSX 语法。所以在编写 HTML 上发生了变化。但我们仍然需要为元素添加鼠标事件、键盘事件等。事件的处理也是一个必须事情。 ## Vue Vue 处理事件通过 v-on 指令完成的，简写是 AT 符号（@）。 ```vue

Welcome

欢迎来到我的网站

Welcome

欢迎来到我的网站