performance - 在大数据集上使用v-model时如何让vuejs响应更快

Question

我正在处理的应用程序呈现了一组人和他们的 child 。阵列中大约有600人。我在文本输入中显示人名和每个人的 child 的名字，以便可以对其进行编辑。我使用 V-model 进行双向绑定(bind)，这样我就可以轻松保存编辑内容。

<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 在对大数据使用双向绑定(bind)时执行得更快？

Answer 1

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

.lazy 修饰符存在于 v-model 指令中。它的作用是在更改事件后将输入与数据模型同步。

用法非常简单:

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

文档:https://v2.vuejs.org/v2/guide/forms.html#lazy