Vue의 목록 렌더링 최적화 기술 및 실무 경험
머리말
Vue를 사용하여 웹 애플리케이션을 개발하는 과정에서 목록 렌더링은 일반적인 요구 사항입니다. 그러나 목록에 많은 양의 데이터가 있는 경우 DOM 작업을 자주 수행하면 페이지 성능이 저하될 수 있습니다. 이 문제를 해결하기 위해 이 기사에서는 Vue의 몇 가지 목록 렌더링 최적화 기술을 소개하고 실제 경험과 코드 예제를 제공합니다.
1. 인덱스를 키 값으로 사용하지 마세요
Vue에서 목록을 렌더링하기 위해 v-for 루프를 사용할 때 각 항목을 고유하게 식별하는 키 값을 제공해야 합니다. 어떤 경우에는 개발자가 순환 인덱스를 키 값으로 사용하는 것을 선호할 수도 있습니다. 그러나 이 접근 방식은 권장되지 않습니다.
index를 키 값으로 사용하는 데 몇 가지 문제가 있습니다. 목록의 순서가 변경되면 Vue는 diff 알고리즘을 통해 DOM을 다시 렌더링합니다. index를 키 값으로 사용하면 불필요한 DOM 연산이 발생하여 성능이 저하될 수 있습니다. 따라서 각 항목의 고유 식별자를 키 값으로 사용해야 합니다.
예:
<li v-for="item in items" :key="item.id">{{ item.name }}</li>로그인 후 복사
로그인 후 복사
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를 사용해야 합니다.
예:
<li v-for="item in items" :key="item.id" v-show="item.visible">{{ item.name }}</li>로그인 후 복사
Three. 로컬 구성 요소 캐시 사용
목록의 각 항목이 For에 해당하는 경우 더 복잡한 구성 요소의 경우 Vue에서 제공하는 로컬 구성 요소 캐시를 사용하여 성능을 향상시킬 수 있습니다. 태그 내에 구성 요소 정의를 배치하면 Vue는 구성 요소 간 전환 시 이미 렌더링된 구성 요소를 캐시하여 반복되는 DOM 작업을 방지합니다.
예:
<keep-alive>
<item :key="item.id" v-for="item in items"></item>
</keep-alive>
로그인 후 복사
4. 가상 목록을 사용하세요
목록의 데이터 양이 매우 많은 경우 , 가상 목록을 사용하여 렌더링 성능을 최적화할 수 있습니다. 가상 목록은 전체 목록이 아닌 현재 표시되는 목록 항목만 렌더링합니다. 가상 목록은 각 목록 항목의 위치와 크기를 동적으로 계산하여 구현할 수 있습니다.
다음은 Vue 기반 가상 목록 플러그인인 vue-virtual-scroll-list를 사용한 예입니다.
<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>로그인 후 복사
5. 페이징 로딩 사용
목록 데이터의 양이 너무 큰 경우 페이징 로딩을 사용하면 대량의 데이터를 한 번에 로드할 때 페이지 성능에 미치는 영향을 줄일 수 있습니다. 목록을 여러 페이지로 나누어 매번 현재 페이지의 데이터만 로드하고 페이징 전환 기능을 제공함으로써 페이지의 렌더링 부담을 효과적으로 줄일 수 있습니다.
다음은 Vue 기반 페이징 로딩 플러그인인 vue-infinite-scroll을 사용한 예입니다.
<li v-for="item in items" :key="item.id">{{ item.name }}</li>로그인 후 복사
로그인 후 복사
<button @click="loadMore">Load More</button>
로그인 후 복사
<script><br> 'vue-infinite-scroll'에서 InfiniteScroll 가져오기</p><p>기본값 내보내기 {<br> 데이터() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>return {
items: [],
page: 1
}</pre><div class="contentsignin">로그인 후 복사</div></div><p>},<br> 메서드: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>loadMore() {
// AJAX请求获取下一页数据
// this.items = [...this.items, ...newData]
this.page++
}</pre><div class="contentsignin">로그인 후 복사</div></div><p>},<br> Mounted() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>// 初始化分页加载插件
// this.$refs.infiniteScroll.addEventListener('scrolled', this.loadMore)</pre><div class="contentsignin">로그인 후 복사</div></div><p>},<br> beforeDestroy() {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>// 销毁分页加载插件
// this.$refs.infiniteScroll.removeEventListener('scrolled', this.loadMore)</pre><div class="contentsignin">로그인 후 복사</div></div><p>}<br> }<br></script>
결론
위의 최적화 기술과 실무 경험을 통해 Vue에서 목록 렌더링을 보다 효율적으로 처리하고 페이지 성능을 최적화할 수 있습니다. 합리적인 키 값 선택, v-show 사용, 로컬 구성 요소 캐싱, 가상 목록 및 페이징 로딩은 페이지 렌더링 속도와 사용자 경험을 향상시킬 수 있습니다. 이 글이 Vue에서 목록 렌더링을 사용하는 과정에 도움이 되기를 바랍니다.
위 내용은 Vue에서 목록 렌더링의 최적화 기술 및 실무 경험의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
