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

因此，回顾一下前面的createNewToDoItem（）代码块，我们看到将todo.value的内容推入列表数组-通过将todo.value推入list.value-然后将todo.value更新为空字符串。
我们还使用了与React示例中相同的newId（）函数。
我们如何从列表中删除？React：const deleteItem = (id) => {
setList(list.filter((item) => item.id !== id));
};
React是如何做的？因此，尽管deleteItem（）函数位于ToDo.js内，但我很容易能够通过首先将deleteItem（）函数作为道具传递给ToDoItem.js来对其进行引用：
首先，该函数向下传递，以使儿童可以使用它。然后，在ToDoItem组件内部，执行以下操作：
deleteItem(item.id)}> -
我要做的就是引用位于父组件内部的函数，就是引用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：function onDeleteItem(id) {
list.value = http://kandian.youth.cn/index/list.value.filter(item => item.id !== id);
}
Vue是如何做的？Vue中需要一种略有不同的方法。我们基本上必须在这里做三件事：
首先，在元素上我们要调用函数：
-
然后，我们必须在子组件（在本例中为ToDoItem.vue）中创建一个emit函数作为方法，如下所示：
function deleteItem(id) { emit("delete", id);}
同时，您会注意到，当我们在ToDo.vue中添加ToDoItem.vue时，我们实际上引用了一个函数：
这就是所谓的自定义事件侦听器。它会侦听在任何情况下使用字符串" delete"触发发射的情况。如果听到此消息，它将触发一个名为onDeleteItem的函数。此函数位于ToDo.vue内部，而不是ToDoItem.vue中。如前所述，此函数仅从list.value数组中过滤ID 。
在这里还值得注意的是，在Vue示例中，我可以简单地将$ emit部分写在@click监听器中，如下所示：
-
这将使步数从3减少到2 ，而这完全取决于个人喜好。
【对比React和Vue中创建应用的区别】简而言之， React中的子组件可以通过props来访问父函数（前提是您要传递props ，这是相当标准的做法，在其他React示例中，您会遇到大量的工作），而在Vue中，您可以从孩子发出事件，通常将其收集在父组件中。
我们如何传递事件监听器？React：简单事件（例如单击事件）的事件侦听器很简单。这是我们如何为创建新的ToDo项目的按钮创建click事件的示例：
+
在这里超级简单，几乎就像我们将如何使用香草JS处理嵌入式onClick 。如Vue部分所述，每当按下Enter键时，设置事件侦听器进行处理就花费了更长的时间。这本质上需要由输入标签处理onKeyPress事件，例如：

只要该函数识别出已按下" enter"键，便会触发createNewToDoItem函数，例如：
const handleKeyPress = (e) => {
if (e.key === "Enter") {
createNewToDoItem();
}
};
Vue：在Vue中，它非常简单明了。我们只使用@符号，然后使用我们想要做的事件监听器的类型。因此，例如，要添加一个click事件监听器，我们可以编写以下代码：
+
注意：@click实际上是编写v-on：click的简写。Vue事件侦听器很酷的事情是，您还可以绑定很多东西，例如.once ，它可以防止事件侦听器被多次触发。在编写用于处理按键的特定事件侦听器时，还有许多捷径。我发现，每当按下Enter键时，在React中创建一个事件侦听器以创建新的ToDo项就花费了相当长的时间。在Vue中，我能够简单地编写：

我们如何将数据传递给子组件？反应：在react中，我们将道具传递到子组件的创建位置。如：
;
在这里，我们看到两个传递给ToDoItem组件的道具。从现在开始，我们现在可以通过this.props在子组件中引用它们。因此，要访问item.todo prop ，我们只需调用props.item 。您可能已经注意到，还有一个关键道具（因此从技术上讲，我们实际上正在传递三个道具）。这主要用于React的内部，因为它使在同一组件的多个版本之间进行更新和跟踪更改变得容易（我们在这里拥有它，因为每个todo是ToDoItem组件的一个副本）。确保您的组件具有唯一键也很重要，否则React会在控制台中警告您。