대용량 데이터 세트에서 v-model을 사용할 때 vuej의 응답 속도를 높이는 방법

대용량 데이터 세트에서 v-model을 사용할 때 vuej의 응답 속도를 높이는 방법

내가 하고 있는 애플리케이션은 많은 사람들과 그들의 아이들을 렌더링한다.약 600명의 사람들이 배열을 하고 있다.각 개인의 자녀 이름과 이름을 텍스트 입력에 표시하여 편집이 가능하도록 하고 있다.나는 a를 사용한다.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" >

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

나도 비슷한 문제가 있었는데 v-model.lazy를 사용해도 해결이 되지 않았다.성능은 조금 나아졌지만 수동으로 하는 것만큼은 아니었다.

따라서 다음과 같은 대신:

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

사용:

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

이론상으로는 거의 비슷하지만, 실제론 훨씬 더 빠르다는 것을 알았다(적어도 그것을 a에 사용).<b-form-input>Bootstrap-vue)로

Tarrakis에 대한 회신에서 v-model.lazy는 사용자 지정 구성 요소(부트스트랩 양식 입력 구성 요소)에서 사용 중이고 v-model.lazy는 사용자 지정 구성 요소에서 작동하지 않으므로 v-model.lazy는 사용자 지정 구성 요소에서 작동하지 않음

참조URL: https://stackoverflow.com/questions/42427845/how-to-make-vuejs-respond-faster-when-using-v-model-on-large-data-sets