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

Question

我正在处理的应用程序呈现了一组人及其 children。阵列中大约有600人。我在文本输入中显示人名和每个人的 children 的名字，以便可以对其进行编辑。我使用 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 在对大数据使用双向绑定时执行得更快？

Answer 1

当你处理一堆数据时，集成分页总是一个好主意，但有时它不是一个选项。

有一个名为 .lazy 的修饰符存在于 v-model directive.What 它确实是在更改事件后与数据模型同步输入。

用法很简单：

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

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

Answer 2

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

所以代替：

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

我用过：

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

理论上它几乎是一样的，但在实践中我发现它更快（至少在 Bootstrap-vue 中的 <b-form-input> 上使用它）

Answer 3

作为对 Arrakis 的回应，v-model.lazy 不适合您，因为您在自定义组件（bootstrap 表单输入组件）和 v-[=12= 上使用它] 不适用于自定义组件。

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

How to make vuejs respond faster when using v-model on large data sets

performance

vue.js

vuejs2