vue에서 동적 구성요소를 사용하는 동안 성능을 향상시키는 방법

vue에서 동적 구성요소를 사용하는 동안 성능을 향상시키는 방법

컨텍스트:

현재 나는 vuex 상태, vuetify의 확장패널, vue의 동적 컴포넌트를 사용하는 복잡한 편집기 어플리케이션에서 일하고 있다.각 동적 구성요소는 소품으로 받아들여지고 자체 중첩 구성요소가 있는 데이터를 사용한다.

문제:

이 접근 방식의 문제는 앱이 중첩된 큰 상태를 다루기 때문에 UI의 추가 작업이 느려지고 UI를 사용할 수 없게 된다는 것이다.

참고:

이 예에서는 이슈를 복제하기 위해 1000개의 객체를 추가했다.유감스럽게도 여기서 페이지 지정을 사용할 수 없다.

성능을 향상시키기 위해 이 문제에 접근하는 다른 방법이 있는가? 어떤 제안도 도움이 될 것이다.

문제:

코드 및 상자 - 데모

코드 및 상자 - 편집

사용 중인 경우index네 것처럼key그리고 동시에 다음을 사용하여 배열의 시작 부분에 새 항목을 추가한다.unshift- 새 품목이 추가될 때마다 모든 구성 요소를 리렌더링해야 함을 의미한다.사용하다:key="item.name"대신 새로운 아이템을 추가하면 속도가 크게 향상될 것이다.

초기 렌더링도 문제 - 페이지 지정이 옵션이 아닌 경우 목록의 일부만 표시되도록 하고 기존 구성 요소를 재사용하여 스크롤을 효과적으로 만드는 일부 가상 목록 솔루션을 살펴보십시오.예를 들어 vue-virtual-scroller가 있다.Vuetify 자체는 자체 구현이 있지만 설명서의 이 메모를 고려할 때 확장 패널에서 얼마나 잘 작동할지는 잘 모르겠다.

우리는 지금 통합하는 과정에 있다.v-virtual-scroll기존 특징 및 구성요소에 구성요소 포함.만약 여러분이 돕고 싶다면, 불화 공동체의 존 라이더에게 연락하십시오.

(또한 정말 오래된 버전의 뷔에티파이를 사용하고 있는 것 같은데...)

참조URL: https://stackoverflow.com/questions/65916358/how-to-improve-performance-while-using-dynamic-components-in-vue