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被分配了一个函数，该函数可以运用新的称号重新创立称号。 值。

在Vue中，它位于setup（）函数外部，并且被称为const name = ref（'Sunil'）。 在我们的运用顺序中，我们将经过调用name.value来援用它。 运用Vue，假设我们要运用在ref（）函数外部创立的值，我们将在变量上寻觅.value而不是复杂地调用该变量。 换句话说，假设我们想要一个持有形状的变量的值，我们将寻觅name.value而不是name。 假设要更新name的值，可以经过更新name.value来完成。 例如，假定我想将我的名字从Sunil更改为John。 我可以经过写name.value =" John"来做到这一点。 我不确定本人被称为约翰的觉得，但是嘿，事情发作了！

(责任编辑：admin)