Vue에서 목록 렌더링의 최적화 기술 및 실무 경험

Vue의 목록 렌더링 최적화 기술 및 실무 경험

머리말
Vue를 사용하여 웹 애플리케이션을 개발하는 과정에서 목록 렌더링은 일반적인 요구 사항입니다. 그러나 목록에 많은 양의 데이터가 있는 경우 DOM 작업을 자주 수행하면 페이지 성능이 저하될 수 있습니다. 이 문제를 해결하기 위해 이 기사에서는 Vue의 몇 가지 목록 렌더링 최적화 기술을 소개하고 실제 경험과 코드 예제를 제공합니다.

1. 인덱스를 키 값으로 사용하지 마세요

Vue에서 목록을 렌더링하기 위해 v-for 루프를 사용할 때 각 항목을 고유하게 식별하는 키 값을 제공해야 합니다. 어떤 경우에는 개발자가 순환 인덱스를 키 값으로 사용하는 것을 선호할 수도 있습니다. 그러나 이 접근 방식은 권장되지 않습니다.

index를 키 값으로 사용하는 데 몇 가지 문제가 있습니다. 목록의 순서가 변경되면 Vue는 diff 알고리즘을 통해 DOM을 다시 렌더링합니다. index를 키 값으로 사용하면 불필요한 DOM 연산이 발생하여 성능이 저하될 수 있습니다. 따라서 각 항목의 고유 식별자를 키 값으로 사용해야 합니다.

예:

d477f9ce7bf77f53fbcf36bec1b69b7a
ff6d136ddc5fdfeffaf53ff6ee95f185

<li v-for="item in items" :key="item.id">{{ item.name }}</li>

929d1f5ca49e04fdcb27f9465b944689
21c97d3a051048b8e55e3c8f199a54b2

2. v-if 대신 v-show를 사용하세요

In Vue, v- if v-show와 v-show 모두 DOM 요소의 표시 및 숨기기를 제어할 수 있습니다. 그러나 v-if는 DOM 요소를 완전히 다시 생성하거나 파괴하므로 약간의 추가 오버헤드가 있습니다. 그리고 v-show는 CSS 속성을 수정하여 DOM 요소만 숨기거나 표시합니다. 따라서 목록 항목의 표시 및 숨기기를 자주 전환해야 하는 경우 v-if 대신 v-show를 사용해야 합니다.

예:

d477f9ce7bf77f53fbcf36bec1b69b7a
ff6d136ddc5fdfeffaf53ff6ee95f185

<li v-for="item in items" :key="item.id" v-show="item.visible">{{ item.name }}</li>

929d1f5ca49e04fdcb27f9465b944689
21c97d3a051048b8e55e3c8f199a54b2

Three. 로컬 구성 요소 캐시 사용

목록의 각 항목이 For에 해당하는 경우 더 복잡한 구성 요소의 경우 Vue에서 제공하는 로컬 구성 요소 캐시를 사용하여 성능을 향상시킬 수 있습니다. 7c9485ff8c3cba5ae9343ed63c2dc3f7 태그 내에 구성 요소 정의를 배치하면 Vue는 구성 요소 간 전환 시 이미 렌더링된 구성 요소를 캐시하여 반복되는 DOM 작업을 방지합니다.

예:

d477f9ce7bf77f53fbcf36bec1b69b7a
ff6d136ddc5fdfeffaf53ff6ee95f185

<keep-alive>
  <item :key="item.id" v-for="item in items"></item>
</keep-alive>

929d1f5ca49e04fdcb27f9465b944689
21c97d3a051048b8e55e3c8f199a54b2

4. 가상 목록을 사용하세요

목록의 데이터 양이 매우 많은 경우 , 가상 목록을 사용하여 렌더링 성능을 최적화할 수 있습니다. 가상 목록은 전체 목록이 아닌 현재 표시되는 목록 항목만 렌더링합니다. 가상 목록은 각 목록 항목의 위치와 크기를 동적으로 계산하여 구현할 수 있습니다.

다음은 Vue 기반 가상 목록 플러그인인 vue-virtual-scroll-list를 사용한 예입니다.

d477f9ce7bf77f53fbcf36bec1b69b7a
ff6d136ddc5fdfeffaf53ff6ee95f185

<virtual-list :size="items.length" :remain="10">
  <template v-slot="{ range }">
    <li v-for="index in range" :key="items[index].id">{{ items[index].name }}</li>
  </template>
</virtual-list>

929d1f5ca49e04fdcb27f9465b944689
21c97d3a051048b8e55e3c8f199a54b2

5. 페이징 로딩 사용

목록 데이터의 양이 너무 큰 경우 페이징 로딩을 사용하면 대량의 데이터를 한 번에 로드할 때 페이지 성능에 미치는 영향을 줄일 수 있습니다. 목록을 여러 페이지로 나누어 매번 현재 페이지의 데이터만 로드하고 페이징 전환 기능을 제공함으로써 페이지의 렌더링 부담을 효과적으로 줄일 수 있습니다.

다음은 Vue 기반 페이징 로딩 플러그인인 vue-infinite-scroll을 사용한 예입니다.

d477f9ce7bf77f53fbcf36bec1b69b7a
b3b4c2870ca397b75d2e0b1c03303414
ff6d136ddc5fdfeffaf53ff6ee95f185

<li v-for="item in items" :key="item.id">{{ item.name }}</li>

224f1b147a69b1f0e700f8d329635183
2722fb35f0228433ae84eb7ba9ff1cf0
eee507863231767bdcc207556a71d96d

<button @click="loadMore">Load More</button>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
'vue-infinite-scroll'에서 InfiniteScroll 가져오기

기본값 내보내기 {
데이터() {

return {
  items: [],
  page: 1
}

},
메서드: {

loadMore() {
  // AJAX请求获取下一页数据
  // this.items = [...this.items, ...newData]
  this.page++
}

},
Mounted() {

// 初始化分页加载插件
// this.$refs.infiniteScroll.addEventListener('scrolled', this.loadMore)

},
beforeDestroy() {

// 销毁分页加载插件
// this.$refs.infiniteScroll.removeEventListener('scrolled', this.loadMore)

}
}
2cacc6d41bbb37262a98f745aa00fbf0

결론
위의 최적화 기술과 실무 경험을 통해 Vue에서 목록 렌더링을 보다 효율적으로 처리하고 페이지 성능을 최적화할 수 있습니다. 합리적인 키 값 선택, v-show 사용, 로컬 구성 요소 캐싱, 가상 목록 및 페이징 로딩은 페이지 렌더링 속도와 사용자 경험을 향상시킬 수 있습니다. 이 글이 Vue에서 목록 렌더링을 사용하는 과정에 도움이 되기를 바랍니다.

위 내용은 Vue에서 목록 렌더링의 최적화 기술 및 실무 경험의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!