苏尼尔Sandhu

遵循

2018年7月24日

13分钟阅读

我创建了相同的应用程序在反应和Vue。这是差异。

使用Vue在工作中,我有一个相当坚实的理解它。然而,我好奇的想知道草地就像篱笆的另一边——草在这种情况下的反应。

我读的文档,看一些教程视频和反应,而他们是伟大的,我真正想知道的是如何从Vue不同的反应。通过“不同”,我并不意味着诸如是否都有虚拟延迟性肌肉酸痛或他们如何渲染页面。我想要有人花时间解释代码!我想找一篇文章花时间解释这个,这样新人Vue或反应(或Web开发作为一个整体)能够更好地理解两者之间的区别。

不幸的是,我找不到任何解决这个问题。所以我开始意识到,我必须去构建这个为了看到的异同。这样做,我想记录整个过程这一篇文章在这最终将存在。

注意:本文的一个新版本,可以在这里找到:

我创建了相同的应用程序在反应和Vue。这是差异。(2021年版)

vs Vue反应。并排的代码比较Vue和反应!

javascript.plainenglish.io

我决定试着建立一个相当标准的应用程序,允许用户从列表中添加和删除条目。两个应用程序都使用默认的综合领先指标(create-react-app反应,vue-cli Vue)。CLI代表命令行接口。

不管怎样,这介绍已经比我预期的要长。让我们先拥有一个快速看看两种应用:

应用程序的CSS代码完全相同,但有这些差异。考虑到这一点,让我们接下来看一看这两个应用程序的文件结构:

你会发现它们的结构几乎是一样的。唯一的区别是,反应的应用有三个CSS文件,而Vue应用没有任何。这样做的原因是,因为在create-react-app反应组件将附带的文件来保持其风格,而Vue CLI采用一个包含所有的方法,实际组件内的风格声明文件。

最终,他们都实现相同的东西,没有说你不能继续,结构不同的CSS或Vue反应。真的可以归结为个人喜好,你会听到很多讨论开发社区/ CSS应该如何结构化。现在,我们就按照结构在这两个综合领先指标。

但在我们继续下去之前,让我们快速浏览一下典型的Vue和反应组件是什么样子:

现在的方式,让我们进入细节细节!

顺便说一下,如果你喜欢这个内容到目前为止,我刚刚推出了一个YouTube频道!这将是惊人的,如果你能支持我订阅我的YouTube频道!

我们如何变异数据?

但首先,我们甚至是什么意思“变异数据”?听起来有点技术不是吗?它基本上只是意味着改变我们已经存储的数据。如果我们想要改变一个人的名字的价值从约翰马克,我们将“变异数据”。这是关键的反应和Vue的区别所在。虽然Vue本质上创建一个数据对象,数据可以自由被更新,创建一个状态对象反应,比较麻烦,需要进行更新。现在反应实现了额外的情况搜集工作有充分的理由,我们会进入这一点。但首先,让我们看一看数据从Vue和对象状态从反应对象:

所以你可以看到,我们已经通过相同的数据,但他们只是贴上不同。所以初始数据传递到我们的组件是非常,非常相似。但正如我们提到的,我们如何改变这两个框架之间的数据不同。

假设我们有一个数据元素名称:“苏尼尔”。

这个调用在Vue,我们参考this.name。我们也可以去更新这个调用this.name= '约翰'。这将改变我的名字,约翰。我不知道我如何看待被称为约翰,但嘿,事情发生!

在反应中,我们将通过调用引用同一块数据this.state.name。现在关键的区别是,我们不能简单地写this.state.name=“约翰”,因为反应的限制,以防止这种简单,:mutation-making。在反应中,我们会写点东西的这一点。设置状态({name:“约翰”})。

虽然这基本上是一样的我们在Vue实现,额外的一些写有因为Vue基本上结合了自己版本的默认设置状态时数据被更新。简言之,反应需要设置状态,然后更新的数据里面,而Vue是假设你想这样做如果你更新值在数据对象。那么为什么反应甚至麻烦,为什么设置状态甚至需要?让我们把这个交给Revanth库马尔一个解释:

“这是因为反应想重新运行特定的生命周期钩子,(比如)componentWillReceiveProps shouldComponentUpdate, componentWillUpdate,渲染,componentDidUpdate,当状态改变。它会知道状态已经改变了,当你调用设置状态函数。如果你直接突变状态,反应必须做更多的工作来跟踪变化和运行生命周期钩子等等。所以使它简单的使用设置状态的反应。”

现在我们有突变的方式,让我们进入细心、坚韧不拔的通过观察我们如何添加新项目都需要我们的应用程序。

我们如何创建新的项目吗?

反应:

createNewToDoItem = () = > {
这.setState(({列表,todo}) = > ({
列表:(
列表,
{
待办事项
}
),
待办事项:“
})
);
};

反应是如何做到的?

在反应中,我们输入字段有一个属性价值。这个值会自动更新通过使用两个函数联系在一起来创建的东西感觉类似于Vue如何处理双向绑定(如果你以前从未听说过这个,有一个更详细的解释的Vue是怎么做到的在这节)。我们创建这个,会有一个额外的onChange事件监听器附加到输入字段。让我们快速看看输入场,这样您就可以看到发生了什么:

< input type = " text "
值= {这.state.todo}
onChange = {这.handleInput} / >

handleInput函数运行时输入字段的值的变化。它更新待办事项状态对象内,通过设置输入字段中的内容。这个函数看起来像这样:

handleInput = e = > {
这.setState ({
待办事项:e.target.value
});
};

现在,当用户按下+按钮在页面上添加一个新项,createNewToDoItem本质上运行这个函数。设置状态并将其传递函数。这个函数接受两个参数,第一个是整个列表状态对象的数组,第二个是待办事项(更新的handleInput功能)。函数返回一个新的对象,它包含了整个列表从之前补充道待办事项在它的结束。整个列表添加通过使用传播算子(谷歌这如果你不是见过——这是ES6语法)。

最后,我们组待办事项一个空字符串,自动更新价值在输入字段。

Vue:

createNewToDoItem () {
这.list.push (
{
“待办事项”:这.todo
}
);
这.todo = ";
}

Vue是怎么做到的?

在Vue,我们输入现场有一个句柄v模型。这使我们能够做一些被称为双向绑定。让我们快速地看看我们的输入字段,然后我们将解释是怎么回事:

< input type = " text " v模型= " todo " / >

v模型关系这个领域一个关键的输入在我们称为toDoItem数据对象。当页面加载时,我们有toDoItem设置为一个空字符串,因此:待办事项:“。如果这已经有一些数据,如待办事项:“这里添加一些文本”,我们的输入字段将负载在这里添加一些文本已经在输入字段。无论如何,回到它作为一个空字符串,无论文本我们内部类型输入字段绑定到的值待办事项。这是有效地双向绑定(输入字段可以更新数据对象和数据对象可以更新输入字段)。

所以回顾createNewToDoItem ()代码块从早些时候,我们看到我们推送的内容待办事项到列表数组然后更新待办事项一个空字符串。

我们如何从列表中删除?

反应:

deleteItem = indexToDelete = > {
这.setState(({列表})= > ({
列表:列表。过滤器((toDo、索引)= >指数! = = indexToDelete)
}));
};

反应是如何做到的?

所以虽然deleteItem函数坐落在里面ToDo.js,我很容易能提到它ToDoItem.js首先,通过deleteItem ()作为支撑< ToDoItem / >是这样的:

< ToDoItem deleteItem = {this.deleteItem.bind(这个键)}/ >

这首先传递函数使其能够访问这个孩子。你会看到,我们也绑定这以及传递的关键参数,关键就是函数要使用能够区分ToDoItem试图删除当点击。然后,在ToDoItem组件,我们做以下:

< div className = " ToDoItem-Delete " onClick = {this.props.deleteItem} > - < / div >

我要做引用一个函数,坐在里面父组件引用this.props.deleteItem。

Vue:

onDeleteItem (todo) {
这.list =这.list。过滤器(项= >项! = = todo);
}

Vue是怎么做到的?

一种稍微不同的方法在Vue是必需的。我们要做三件事:

首先,在我们想要调用的函数的元素:

< div class = " ToDoItem-Delete " @click = " deleteItem (todo) " > - < / div >

然后创建一个发射函数方法在子组件(在这种情况下,ToDoItem.vue),它看起来像这样:

deleteItem (todo) {
这释放美元(“删除”,todo)。
}

而且,你会注意到我们参考函数当我们添加ToDoItem.vue里面的ToDo.vue:

< ToDoItem v = " todo列表”
:todo =“待办事项”
@delete = " onDeleteItem " / /<——这:)
:关键= " todo.id "/>

这就是被称为一个定制的事件监听器。它对任何场合听出,发出触发的一系列“删除”。如果听到这,它触发一个函数调用onDeleteItem。这个函数里面坐ToDo.vue,而不是ToDoItem.vue。这个函数,正如前面列出的,简单的过滤器todo数组内部的数据对象点击删除条目。

值得注意的,在Vue的例子中,我可以简单的写了美元发出内部的一部分@click侦听器,因此:

< div class = " ToDoItem-Delete“@click = " $排放(“删除”,todo) " > - < / div >

这将减少步骤的数量从3 - 2,这只是个人喜好。

简而言之,子组件在反应将通过访问父函数this.props(提供你通过道具,这是相当标准的练习,你就会遇到很多次在其他反应的例子),同时在Vue,你必须发出事件的孩子通常会被收集在父组件。

我们如何通过事件监听器吗?

反应:

事件监听器等简单的事情直接单击事件。下面是一个例子,我们创建了一个单击事件的按钮创建一个新的待办事宜:

<按钮className = " ToDo-Add " onClick = {this.createNewToDoItem} > + < / div >。

超级简单,几乎看起来如何处理与香草JS内联onClick。正如Vue节中提到的,会用一点时间来建立一个事件监听器来处理只要输入按钮被按下。这本质上要求一个onKeyPress事件是由输入标签,因此:

< input type = " text " onKeyPress = {this.handleKeyPress} / >。

这个函数实际上引发了createNewToDoItem函数时承认“输入”键被按下,是这样的:

handleKeyPress = (e) = > {如果(e。键= = =“输入”){this.createNewToDoItem ();}};

Vue:

在Vue超级简单。我们仅仅使用@符号,然后事件监听器的类型,我们想做的事。例如,添加一个单击事件监听器,我们可以编写以下:

<按钮类= " ToDo-Add " @click = " createNewToDoItem () " > + < / div >

注意:@click实际上是速记写吗v:点击。Vue事件侦听器的件很酷的事情是,也有很多东西可以链,如一旦阻止事件侦听器被引发了不止一次。也有很多快捷键时写具体的事件监听器来处理关键中风。我发现它需要花费相当长的时间中创建一个事件侦听器创建新的反应ToDo项只要输入按钮被按下。在Vue,我能够简单地写:

< input type = " text " v: keyup.enter = " createNewToDoItem " / >

我们如何将数据传递给子组件?

反应:

在反应中,我们通过道具到子组件的创建。如:

< ToDoItem关键={关键}= {todo} / >项

在这里,我们看到两个道具传递到ToDoItem组件。从这一点上,我们现在可以通过this.props子组件中引用它们。所以访问item.todo道具,我们只是电话this.props.item。

Vue:

在Vue,我们通过道具到子组件的创建。如:

< ToDoItem v = " todo列表”
:todo =“待办事项”
:关键= " todo.id "
@delete = " onDeleteItem " / >

一旦做出了选择,然后将它们传递到道具组的子组件,因此:道具(“备忘录”):。这些孩子中引用可以通过他们的名字,所以在我们的例子中,“待办事项”。

我们如何回到父组件发出数据?

反应:

我们首先通过函数的子组件通过引用它作为道具的地方我们所说的子组件。然后我们将调用添加到函数对孩子不管用什么办法,比如一个onClick,通过引用this.props.whateverTheFunctionIsCalled。这将触发坐在父组件的功能。我们可以看到整个过程的部分的一个例子“我们如何从列表中删除”。