Performance 在大数据集上使用v-model时，如何使VueJ响应更快

我正在处理的应用程序呈现了一组人员及其子女。阵列中大约有600人。我在文本输入中显示人名和每个人的子女的姓名，以便对其进行编辑。我使用

V-model

进行双向绑定，以便轻松保存编辑

<tr v-for="person in persons">
  <td>
    <input type="text" v-model="person.name" />
  </td>
  <td v-for="child in person.children">
    <input type="text" v-model="child.name" />
  </td>
</tr>

问题是，当我开始在文本框中键入内容时，会出现延迟，我必须等待几秒钟才能显示我键入的内容

当我使用

v-bind:value

或者当我将来自api的人数减少到50人时，不会发生这种情况。我可以使用分页，但我的老板想一次看到所有的结果

---

我的问题是，在对大数据使用双向绑定时，如何使

vue.js

执行得更快？

在处理大量数据时，集成分页总是一个好主意，但有时这不是一个选项

有一个名为

.lazy

的修饰符存在于

v-model

指令上。它所做的是在更改事件后将输入与数据模型同步

用法非常简单：

<input v-model.lazy="msg" >

---

文档：

我也遇到过类似的问题，使用v-model.lazy并没有解决它。它的性能稍微好一点，但不如手动操作

因此，不是：

<input v-model.lazy="msg">

我用过：

<input :value="msg" @change="v => msg = v">

---

理论上，这几乎是一样的，但在实践中，我发现它快得多（至少在Bootstrap vue中的

上使用它）

我不知道它是否有帮助，但您可以尝试使用v-bind:value和onKeyDown侦听器来更新值。为什么不分页呢？使用

v-model.lazy=“property.name”

但这确实有点太多数据，所以最好集成一些分页。谢谢@BelminBedak。v-model.lazy工作得很有魅力。好吧，我将添加它作为答案，并做一些详细的解释。我仍然觉得很奇怪，vuejs在处理600个v-model时没有这个选项。一旦我用angular 1和3000个ng模型创建了一个视图，我就一点问题都没有了。Btu使用

键

attribute@tocqueville检查此示例-此处的500个项目在没有延迟修改器的情况下正常工作。@BelminBedak您的示例在没有延迟的情况下也适用于1700个项目，用于mev模型侦听

@input

。如果您收听

@change

，那么您所做的工作将比v-model少得多。谢谢<代码>v型。懒惰也不适合我。这是。