我用React和Vue构建了同款应用，来看看哪里不一样

Posted 2021-04-16 前端之巅

作者｜Sunil Sandhu

译者｜王强

编辑｜王文婧

前几天，我们曾和大家探讨了 React、Angular、Vue.js 三大框架的优缺点。在留言中，许多朋友提到 Vue 在国内的市场应用广泛，最近 Vue 3.0 Pre-Alpha 的发布也让它成为前端圈关注的焦点。而 React 则易于学习，有网友评论，不关注框架本身提供的 API，更容易让开发者形成靠谱的代码风格。理论上的梳理或许还不够直观，今天的文章作者就进行了这样一场实验，他也在好奇，如果用 React 和 Vue 构建同样一款应用，开发过程与效果会是怎样的？

我在工作中使用 Vue 有一段时间了，对它的了解也相当深刻，但我很想知道围墙另一边的草是什么样的——这里所说的草指的就是 React。

我阅读了很多 React 文档并观看了一些教学视频，它们的确很棒，但我真正想知道的是 React 与 Vue 有何不同。我所说的“不同”并不是它们是否都有虚拟 DOM，或者它们是怎样渲染页面之类的问题。我希望的是有人从代码层面给出解释。我希望能有一篇文章涵盖这样的内容，帮助那些对 Vue 或 React（乃至整个 Web 开发工作）都不熟悉的人更好地理解两者之间的区别。

可惜我找不到现成的答案。因此我意识到我得自己动手解决这个问题才能看清楚两者之间的异同。于是我记录下了整个对比过程，终于完成了这样一篇文章，填补了这方面的空白。

哪个更好看？

我决定尝试构建一款比较典型的 To Do 类应用，允许用户在列表中添加和删除项目。两款应用都是使用默认 CLI 构建的（React 用 create-react-app，Vue 则是 vue-cli）。顺带一提，CLI 的意思是命令行界面。

以上是关于我用React和Vue构建了同款应用，来看看哪里不一样的主要内容，如果未能解决你的问题，请参考以下文章

Vue.js 在哪里？

React 谁都会，你的优势在哪里？

快来看看Vue的虚拟DOM和Diff算法的原理

axios和ajax的区别在哪里?

使用 redux 构建 React 应用程序时在哪里存储 WebRTC 流

VUE 编写后台常用的组件(table)