对比React和Vue中创建应用的区别 ReactvsVue：现在有了ReactHooksVu

React vs Vue：现在有了React Hooks Vue 3 Composition API！
React vs Vue：传奇继续几年前，我决定尝试在React和Vue中构建一个相当标准的To Do App 。这两个应用程序都是使用默认的CLI构建的（React的create-react-app和Vue的vue-cli）。我的目的是编写无偏见的内容，并提供有关如何使用这两种技术执行某些任务的概述。
当React Hooks发布时，我在原始文章后面加上了" 2019 Edition" ，该版本将Class Components的使用替换为Functional Hooks 。随着Vue第3版及其成分API的发布，现在是时候以" 2020版"再次更新本文了。
让我们快速看一下这两个应用的外观：
文章插图
两个应用程序的CSS代码完全相同，但是它们的位置有所不同。考虑到这一点，接下来让我们看一下两个应用程序的文件结构：
文章插图
最终，他们俩都能达成同一目标，而且无话可说，您无法继续在React或Vue中以不同的方式构造文件。这实际上取决于个人喜好。您将听到来自开发人员社区的大量讨论，关于CSS的结构，尤其是关于React的结构，因为存在许多CSS-in-JS解决方案，例如样式组件和情感。顺便说一句， CSS-in-JS的字面意义就是这样。尽管这些功能很有用，但到目前为止，我们将仅遵循两个CLI中列出的结构。
但是在进一步介绍之前，让我们快速看一下典型的Vue和React组件的外观：
典型的React文件：
文章插图
典型的Vue文件：
文章插图
既然已经解决了，让我们深入了解细节吧！
我们如何突变数据？但是首先， "突变数据"甚至意味着什么？听起来有点技术性吗？基本上，这只是意味着更改我们已存储的数据。因此，如果我们想将一个人的名字的值从John更改为Mark ，我们将"对数据进行突变" 。因此，这就是React和Vue之间的关键区别所在。虽然Vue本质上创建了一个数据对象，可以在其中自由更新数据，但是React通过状态钩子来处理它。
让我们看一下下面两个图片中的设置，然后我们将说明发生了什么：
React状态：
文章插图
Vue状态：
文章插图
因此，您可以看到我们已经将相同的数据传递给了两者，但是结构有些不同。
使用React或至少从2019年开始，我们通常会通过一系列的Hooks处理状态。如果您以前没有看过这种概念，那么一开始它们可能看起来有些奇怪。基本上，它的工作方式如下：
假设我们要创建待办事项列表。我们可能需要创建一个名为list的变量，它可能需要一个由字符串或对象组成的数组（例如，如果我们想给每个待办事项字符串一个ID和其他一些东西，我们可以通过编写const [ list ， setList] = useState（[]）。这里我们使用React称为Hook的钩子-称为useState 。这基本上使我们可以在组件中保留局部状态。
另外，您可能已经注意到我们在useState（）内部传入了一个空数组[] 。我们放在其中的是我们希望列表最初设置的内容，在我们的例子中，我们希望是一个空数组。但是，从上图可以看到，我们在数组内部传入了一些数据，这些数据最终是list的初始化数据。想知道setList是做什么的？稍后将对此进行更多说明！
在Vue中，通常会将组件的所有可变数据放置在setup（）函数内，该函数返回一个对象，其中包含要公开的数据和函数（这基本上意味着您希望能够使用的东西）在您的应用中使用）。您会注意到，应用程序中的每个状态数据（也就是我们希望能够进行突变的数据）都包装在ref（）函数内部。此ref（）函数是我们从Vue导入的，可让我们的应用程序在任何更改或更新这些数据时都可以更新。简而言之，如果您想在Vue中创建可变数据，请为ref（）函数分配一个变量，并将任何默认数据放入其中。
那么我们如何在我们的应用程序中引用可变数据呢？好吧，假设我们有一些名为name的数据被分配了Sunil的值。
在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被分配了一个函数，该函数可以使用新的名称重新创建名称。值。