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

在Vue中，它位于setup（）函数内部，并且被称为const name = ref（'Sunil'）。在我们的应用程序中，我们将通过调用name.value来引用它。使用Vue ，如果我们要使用在ref（）函数内部创建的值，我们将在变量上寻找.value而不是简单地调用该变量。换句话说，如果我们想要一个持有状态的变量的值，我们将寻找name.value而不是name 。如果要更新name的值，可以通过更新name.value来完成。例如，假设我想将我的名字从Sunil更改为John 。我可以通过写name.value ="http://kandian.youth.cn/index/John"来做到这一点。我不确定自己被称为约翰的感觉，但是嘿，事情发生了！
实际上， React和Vue在这里做着同样的事情，即创建可以更新的数据。每当ref（）函数内部包装的一条数据被更新时， Vue本质上都会默认结合其自己的name和setName版本。React要求您使用内部值调用setName（）来更新状态，如果您试图更新数据对象内部的值， Vue会假设您要这样做。那么，为什么React还要从函数中分离值呢？为什么还要使用useState（）呢？本质上，每当状态改变时， React都希望能够重新运行某些生命周期挂钩。在我们的示例中，如果调用setName（）， React将知道某些状态已更改，因此可以运行这些生命周期挂钩。如果直接改变状态， React将不得不做更多的工作来跟踪更改以及要运行的生命周期挂钩等。
现在，我们已经有了一些变通的方式，让我们通过研究如何将新项目添加到两个"待办事项"中来了解更多细节。
我们如何创建新的待办事项？React：const createNewToDoItem = () => {
const newId = generateId();
const newToDo = { id: newId, text: toDo };
setList([...list, newToDo]);
setToDo("");
};
React是如何做的？在React中，我们的输入字段具有一个名为value的属性。每次通过onChange事件侦听器更改其值时，都会自动更新此值。JSX（基本上是HTML的变体）如下所示：

因此，每次更改值时，它都会更新状态。handleInput函数如下所示：
const handleInput = (e) => {
setToDo(e.target.value);
};
现在，每当用户按下页面上的+按钮添加新项目时，都会触发createNewToDoItem函数。让我们再次看一下该功能，以了解发生了什么：
const createNewToDoItem = () => {
const newId = generateId();
const newToDo = { id: newId, text: toDo };
setList([...list, newToDo]);
setToDo("");
};
本质上， newId函数基本上是在创建一个新ID ，该ID将提供给我们的新toDo项。newToDo变量是一个具有ID密钥的对象，该ID密钥具有newId的值。它还具有一个文本键，该键将toDo中的值用作其值。这与输入值更改时要更新的toDo相同。
然后，我们用完setList函数，并传入一个包含整个列表以及新创建的newToDo的数组。
如果… list位看起来很奇怪，则开头的三个点称为散布运算符，它基本上将列表中的所有值作为单独的项目传递，而不是简单地传递完整的项目作为数组。困惑？如果是这样，我强烈建议您仔细阅读散布，因为它很棒！
无论如何，最后我们运行setToDo（）并传入一个空字符串。这样我们的输入值为空，可以输入新的toDos了。
Vue：function createNewToDoItem() {
const newId = generateId();
list.value.push({ id: newId, text: todo.value });
todo.valuehttp://kandian.youth.cn/index/= "";
}
Vue是如何做的？在Vue中，输入字段上有一个称为v-model的句柄。这使我们能够执行称为双向绑定的操作。让我们快速查看一下输入字段，然后说明发生了什么：

V-Model将该字段的输入与我们在setup（）函数顶部创建的变量绑定在一起，然后将其作为键公开给我们返回的对象。到目前为止，我们还没有介绍对象返回的内容，因此，对于您的信息，这是我们从ToDo.vue内部的setup（）函数返回的内容：
return { list, todo, showError, generateId, createNewToDoItem, onDeleteItem, displayError};
这里， list ， todo和showError是我们的有状态值，而其他所有功能都是我们希望能够在应用程序其他位置调用的函数。好的，从切线返回，当页面加载时，我们必须将todo设置为空字符串，例如：const todo = ref（""）。如果这里已经有一些数据，例如const todo = ref（"在此处添加一些文本"）：我们的输入字段将在输入字段内部已经添加一些文本的情况下加载。无论如何，回到它作为一个空字符串，无论我们在输入字段中键入什么文本都必须绑定到todo.value 。这实际上是双向绑定-输入字段可以更新ref（）值，而ref（）值可以更新输入字段。