前几天，我们曾和大家探讨了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 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需要的方法稍微有一些不同。这里我们必须做三件事：

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

<div class=”ToDoItem-Delete” @click=”deleteItem(item)”>-</div>

然后我们必须在子组件（在本例中为ToDoItem.vue）中创建一个emit函数作为方法，如下所示：

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

与此同时你会发现，当我们在ToDo.vue中添加ToDoItem.vue时，我们实际上引用了一个函数：

<ToDoItem v-for="todo in list" 
          :todo="todo" 
          @delete="onDeleteItem" // <-- this :)
          :key="todo.id" />

这就是所谓的自定义事件侦听器。它会侦听使用字符串“delete”触发emit的所有情况。如果听到此消息，它将触发一个名为onDeleteItem的函数。此函数位于ToDo.vue内部，而不是在ToDoItem.vue中。如前所述，此函数仅过滤data对象内的todo数组即可删除单击的项目。

在这里还需注意的是，在Vue示例中，我可以简单地将$emit部分写在@click监听器中，如下所示：

<div class=”ToDoItem-Delete” @click=”$emit(‘delete’, item)”>-</div>

这样就能把步骤从3步减少到2步，选哪个完全取决于个人喜好。

简而言之，React中的子组件可以通过props来访问父函数（前提是你要向下传递props，这是相当标准的做法，其他React工作中也非常常见）；而在Vue中，你需要从子级发射事件，这些事件通常会在父组件内部回收。

怎样传递事件侦听器？

React：

针对简单事件（例如单击事件）的事件侦听器很好做。下面是为创建新的ToDo项目的按钮创建click事件的示例：

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

这里非常简单，和在一般的JS里处理内联onClick差不多。如Vue部分所述，设置一个事件侦听器来侦听按下Enter键的动作有点复杂。这需要由input标签处理onKeyPress事件，如下：

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

只要识别出已按下“enter”键，此函数就触发了createNewToDoItem函数，如下：

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

Vue：

在Vue中写起来非常直观。我们只使用@符号，后面是我们想要做的事件监听器的类型。例如要添加一个click事件监听器，我们可以编写以下代码：

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

注意：@click实际上是v-on:click的简写。Vue事件侦听器很好用的是你还可以绑定很多东西，例如.once，它可以防止事件侦听器被多次触发。在编写处理按键的特定事件侦听器时还有许多捷径。我发现在React中创建一个事件侦听器，做到每当按下enter键就创建新的ToDo项目写起来比较麻烦。在Vue中，我只需编写：

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

如何将数据传递给子组件？

React：

在React中，我们将props传递到子组件的创建位置。如：

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

这里我们看到两个传递给ToDoItem组件的props。从这里开始，我们就可以通过this.props在子组件中引用它们。因此要访问item.todo prop时，我们只需调用props.item。

Vue：

在Vue中，我们将props传递到子组件的创建位置。如：

<ToDoItem v-for="item in list" 
  :item="item" 
  @delete="onDeleteItem" 
  :key="item.id" />

完成此操作后，我们将它们传递到子组件的props数组中，如下所示：props:[‘todo’]。然后它们就可以在子组件中用名称引用——这里的名称就是‘todo’。

如何将数据发送回父组件？

React：

我们首先将函数向下传递给子组件，在调用子组件的位置将其作为prop引用。然后我们向子组件的函数添加调用，比如说onClick就引用props.whateverTheFunctionIsCalled，或者whateverTheFunctionIsCalled（如果用解构）。然后将触发位于父组件中的函数。我们可以在“如何从列表中删除项目”部分中查看全过程。

Vue：

在子组件中，我们只需要编写一个将值返回给父函数的函数即可。在父组件中我们编写一个函数，该函数侦听何时发出该值，然后可以触发函数调用。可以在“如何从列表中删除项目”部分中查看全过程。

终于完成了🎉

我们已经研究了如何添加、删除和更改数据，以props形式将数据从父级传递到子级，以及以事件侦听器的形式将数据从子级发送到父级。当然，React和Vue之间还有许多其他的小差异和特殊要素，但我希望本文的内容有助于大家理解这两个框架是如何处理事物的。

如果你有兴趣fork本文中使用的样式，并想制作自己的类似作品，请自便！👍

两个应用的Github链接：
Vue ToDo：https://github.com/sunil-sandhu/vue-todo-2019
React ToDo：https://github.com/sunil-sandhu/react-todo-2019

原文链接：
https://medium.com/javascript-in-plain-english/i-created-the-exact-same-app-in-react-and-vue-here-are-the-differences-2019-edition-42ba2cab9e56

创作场景

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