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

问题

The application i'm working on renders an array of persons and their children. There are about 600 persons in the array. I am displaying the person name and the names of each person's children in text inputs so that they can be edited. I use a V-model for two way binding so I can easily save the edits.

<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>

The problem is when I start typing in the textboxes, there is a lag and I have to wait some seconds before what I typed displays.

This doesn't happen when I use v-bind:value or when I reduce the number of persons coming from the api to say 50 persons. I could use pagination but my boss wants to see all the results displayed at once.

My question is, how can I make vue.js perform faster while using two way binding on large data?.

回答1:

When you are dealing with bunch of data It's always good idea to integrate the sort of pagination, but sometimes It's just not an option.

There is modifier called .lazy that lives on v-model directive.What it does is sync input with data model after change event.

Usage is pretty simple:

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

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

回答2:

I have had a similar issue, and using v-model.lazy did not solve it. It performed a little bit better, but not as much as doing it manually.

So instead of:

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

I used:

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

In theory it's pretty much the same, but in practice I found it much faster (at least using it on a <b-form-input> in Bootstrap-vue)

来源：https://stackoverflow.com/questions/42427845/how-to-make-vuejs-respond-faster-when-using-v-model-on-large-data-sets

标签

performance

vuejs2

Vue.js