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

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

哪个更好看？

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

好了，开头的部分比我想象的还要长，我们可以切入正题了。先来大致看一下两款应用的外观：

React vs Vue。不可移动的对象遇到了不可抗拒的力量！

两个应用程序的 CSS 代码完全相同，但代码所处的位置有所不同。记住这一点，接下来让我们看一下两个应用程序的文件结构：

你会发现它们的结构也几乎相同。唯一的区别是 React 应用有三个 CSS 文件，而 Vue 应用没有任何 CSS 文件。这是因为在 create-react-app 中，每个 React 组件都会附带一个文件来保存其样式，而 Vue CLI 采用了一种 包含式 的方法，具体来说是在组件文件中声明样式。

最后他们俩都达成了同样的目标，也没什么可多说的，因为在 React 或 Vue 中你都不能改变 CSS 的结构。这确实取决于个人喜好。开发人员社区关于 CSS 的结构化方式这个话题有大量的讨论，尤其是 React 这块，因为有许多 CSS-in-JS 解决方案，诸如样式组件和 emotion 等。顺便说一句，CSS-in-JS 就是字面上的意思。虽然这些都很有用，但这里我们只用两边的 CLI 给出的结构。

在进一步深入之前，我们先来看一下典型的 Vue 和 React 组件长什么样：

左边是 React，右边是 Vue。

看过之后我们来深入了解细节吧！

我们如何突变数据？

首先，“突变数据”到底是什么意思呢？听起来是不是有点高深？其实它基本上就是指更改我们已存储的数据。如果我们想将一个人名的值从 John 更改为 Mark，我们就是在“突变“这份数据。这就是 React 和 Vue 之间的关键区别所在。Vue 本质上创建了一个数据对象，可以在其中自由更新数据，而 React 通过所谓的状态 hook 来处理数据突变。

从下面的图片中可以看到两者的设置，然后我们会具体说明：

左边是 React，右边是 Vue。

于是你看到我们将相同的数据传递给了两者，但是各自的结构有所不同。

在 Vue 中，通常会将组件的所有可变数据放置在 data() 函数内，该函数返回一个对象，其中包含你的数据。

在 React 中，至少从 2019 年开始，我们一般会通过一系列 Hooks 处理状态。你可能以前没接触过这种概念，一开始它看起来可能有点奇怪。它的工作机制基本上是这个样子：假设我们要创建一个待办事项列表，我们可能需要创建一个名为 list 的变量，它可能需要一个由字符串或对象组成的数组(比如说给每个 todo 字符串一个 ID 或其他一些东西)。我们需要写的代码是 const [list, setList] = useState([])。这里我们用的就是 React 里面的 Hook，称为 useState。它本质上是让我们能够在组件中保留局部状态。

另外，你可能已经注意到我们在 useState() 内部传入了一个空数组 []。放在其中的是我们希望 list 最初设置的内容，这里我们希望是一个空数组。但从上图可以看到，我们在数组内传入了一些数据，这些数据最后成了 list 的初始化数据。想知道 setList 是做什么的？稍后会进一步说明！

如何在应用程序中引用可变数据？

假设我们有一些数据名为 name，被分配了“Sunil”值。

在 Vue 中，这部分内容位于 data() 对象内部，写成 name: ‘Sunil'。在我们的应用程序中，我们将调用 this.name 来引用它。我们还可以调用 this.name = 'John'来更新它，把我的名字改为 John。

在 React 中，由于我们使用 useState() 创建了较小的状态，因此很可能已经用 const [name, setName] = useState('Sunil') 创建了一些东西。在应用程序中，我们将简单地调用 name 来引用同一段数据。这里的主要区别在于我们不能简单地写上 name = 'John'，因为 React 有一些限制来预防这种简单且无所顾忌的突变。在 React 中，我们要写成 setName('John')。这里用到了 setName。在 const [name, setName] = useState('Sunil') 中，它创建两个变量，一个变量变为 const name = 'Sunil'，而第二个 const setName 被分配了一个函数，该函数使 name 可以用新值重新创建。

实际上，React 和 Vue 在这里做的是同样的事情，也就是创建可以更新的数据。Vue 本质上会在每次更新一条数据时默认结合它自己的 name 和 setName 版本。简单来说，React 要求你使用内部值调用 setName() 来更新状态，而如果你曾尝试更新数据对象内部的值，Vue 就会假设你要这么做。那么为什么 React 会费劲地将值与函数分开，还要使用 useState() 呢？这里引用 Revanth Kumar 的解释：

“这是因为当状态改变时，React 希望重新运行某些生命周期 hooks。当你调用 useState 函数时，它将知道状态已更改。如果你直接改变状态，React 将不得不做更多的工作来跟踪更改以及要运行的生命周期 hooks 等。因此为了简单起见，React 使用 useState。”

Bean 最懂了。

现在我们已经搞明白了数据突变，接下来看看在两个 To Do 应用中添加新项目的方法。

如何创建新的待办事项？

React：

const createNewToDoItem = () => {  const newId = Math.max.apply(null, list.map((t) => t.id)) + 1  const newToDo = { id: newId, text: toDo };  setList([...list, newToDo]);  setToDo("");};

在 React 中，我们的输入字段有一个名为 value 的属性。每次通过 onChange 事件侦听器 更改它的值时，都会自动更新此值。JSX(基本上是 HTML 的变体)如下所示：

<input type="text"value={toDo}onChange={handleInput}/>

每次更改值时，它都会更新状态。handleInput 函数如下所示：

const handleInput = (e) => {  setToDo(e.target.value);};

现在，每当用户按下页面上的 + 按钮添加新项目时，都会触发 createNewToDoItem 函数。我们再来看一下这个函数，搞清楚具体发生了什么：

const createNewToDoItem = () => {  const newId = Math.max.apply(null, list.map((t) => t.id)) + 1  const newToDo = { id: newId, text: toDo };  setList([...list, newToDo]);  setToDo("");};

本质上，newId 函数是在创建一个新 ID，该 ID 将提供给我们的新 toDo 项目。newToDo 变量是一个对象，有一个 id 键，其值由 newID 确定。它还有一个 text 键，其值由 toDo 确定。这个 toDo 就是输入值更改时要更新的那个 toDo。

setList 函数到此为止，然后我们传入一个包含整个 list 以及新创建的 newToDo 的数组。

你可能觉得…list 看起来很奇怪：开头的三个点称为散布运算符，负责将 list 中的所有值作为单独的项目传递，而不是简单地把所有项目打包在一起作为数组传递。感觉有些糊涂吗？那我强烈建议你仔细阅读散布运算符的相关介绍，因为它很有用！

最后我们运行 setToDo() 并传入一个空字符串。这样我们的输入值为空，可以输入新的 toDo 了。

Vue：

createNewToDoItem() {  const newId = Math.max.apply(null, this.list.map(t => t.id)) + 1;

  this.list.push({ id: newId, text: this.todo });  this.todo = "";}

在 Vue 中，我们的 input 字段有一个称为 v-model 的句柄。这使我们能够执行称为 双向绑定 的操作。下面来看一下 input 字段，搞清楚到底发生了什么：

<input type="text" v-model="todo"/>

V-Model 将这个字段的输入与我们在数据对象 toDoItem 中的键相关联。页面加载后，我们必须将 toDoItem 设置为空字符串，例如：todo:''。如果其中已经有一些数据，例如 todo: ‘add some text here’，则我们的输入字段将加载输入字段内已有的 add some text here。那么输入字段为空时，无论我们在输入字段中键入什么文本都将绑定到 todo 的值。这实际上是双向绑定(输入字段可以更新数据对象，反过来数据对象也可以更新输入字段)。

回顾一下前面的 createNewToDoItem**()代码块，可以看到，我们将todo的内容推送到list数组中，然后将todo** 更新为空字符串。

我们还使用了与 React 示例中相同的 newId() 函数。

如何从列表中删除项目？

React：

const deleteItem = (item) => {  setList(list.filter((todo) => todo !== item));};

因为 deleteItem() 函数位于 ToDo.js 内，我可以很容易地在 ToDoItem.js 里引用它，首先将 deleteItem**()函数作为** 的 prop，如下所示：

<ToDoItem deleteItem={deleteItem}/>

这里首先将该函数传递下去，使其能被子级访问。然后在 ToDoItem 组件内执行以下操作：

<button className="ToDoItem-Delete" onClick={() => deleteItem(item)}> - button>

我要引用位于父组件内的函数，只需引用 props.deleteItem。你可能发现在代码示例中，我们只写了 deleteItem，而不是 props.deleteItem。这是因为我们使用了一种称为 解构 的技术，该技术允许我们获取 props 对象的一部分并将其分配给变量。因此在我们的 ToDoItem.js 文件中有以下内容：

const ToDoItem = (props) => {  const { item, deleteItem } = props;}

这为我们创建了两个变量，其中一个称为 item，它被赋予与 props.item 相同的值，而 deleteItem 则根据 props.deleteItem 赋值。我们也可以简单地使用 props.item 和 props.deleteItem 来避免解构的操作，但我认为这里值得单独介绍一下！

Vue：

onDeleteItem(item){  this.list = this.list.filter(todo => todo !== item);}

Vue 需要的方法稍微有一些不同。这里我们必须做三件事：

首先，在我们要调用函数的元素上：

deleteItem(item) {    this.$emit('delete', item)}

for="todo in list"          :todo="todo"          @delete="onDeleteItem" //           :key="todo.id" />

<button className=”ToDo-Add” onClick={createNewToDoItem}>+div>.

<input type=”text” onKeyPress={handleKeyPress}/>.

handleKeyPress = (e) => {  if (e.key === ‘Enter’) {    createNewToDoItem();  }};

class=”ToDo-Add” @click=”createNewToDoItem()”>+div>

<input type=”text” v-on:keyup.enter=”createNewToDoItem”/>

<ToDoItem key={key.id} item={todo} />

for="item in list":item="item"  @delete="onDeleteItem":key="item.id" />