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

Question

我正在研究的应用程序呈现了一系列人和他们的孩子.阵列中约有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在对大数据使用双向绑定时更快地执行？

Answer 1

我有一个类似的问题，使用 v-model.lazy 并没有解决它。它的表现要好一些，但不如手动执行。

所以而不是：

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

我用了：

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

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

Answer 2

当你处理大量数据时整合这种分页总是好主意,但有时它不是一个选项.

有一个称为.lazy生命v-model指令的修饰符.它的作用是在改变事件后将输入与数据模型同步.

用法非常简单:

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

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