Vue.js 에서 더 좋 은 v-for 순환 을 만 드 는 6 가지 방법 을 자세히 알 아 보 세 요.

VueJS 에서 v-for 순환 은 모든 항목 에서 사용 할 수 있 는 것 입 니 다.템 플 릿 코드 에서 for 순환 을 만 들 수 있 습 니 다.
가장 기본 적 인 용법 중에서 그들의 용법 은 다음 과 같다.

<ul>
 <li v-for='product in products'>
  {{ product.name }}
 </li>
</ul>

그러나 본 논문 에서 나 는 너의 v-for 코드 를 더욱 정확 하고 예측 가능 하 며 강하 게 하 는 여섯 가지 방법 을 소개 할 것 이다.
시작 합 시다.
1.항상 v-for 순환 에서 key 사용
우선,우 리 는 대부분의 Vue 개발 자 들 이 이미 알 고 있 는 흔 한 최선 의 방법 인 v-for 순환 에서 사용 하 는 키 를 토론 할 것 이다.유일한 키 속성 을 설정 하면 구성 요소 가 원 하 는 방식 으로 작 동 하도록 확보 할 수 있 습 니 다.
만약 에 우리 가 key 를 사용 하지 않 으 면 Vue 는 DOM 을 가능 한 한 효율 적 으로 하려 고 시도 할 것 이다.이것 은 v-for 요소 가 무질서 하거나 예측 할 수 없 는 행동 을 할 수 있다 는 것 을 의미 할 수 있다.만약 우리 가 모든 요소 에 대해 유일한 키 인용 을 가지 고 있다 면,우 리 는 DOM 이 어떻게 작 동 할 지 더욱 정확하게 예측 할 수 있 을 것 이다.

<ul>
 <li 
  v-for='product in products'
  :key='product._id' 
 >
  {{ product.name }}
 </li>
</ul>

2.한 범위 내 에서 순환
대부분의 경우 v-for 는 배열 이나 대상 을 옮 겨 다 니 는 데 사용 되 지만,어떤 경우 에는 일정 횟수 만 반복 적 으로 실행 하 기 를 바 랄 것 입 니 다.
예 를 들 어,우리 가 온라인 상점 을 위해 페이지 시스템 을 만 들 고 있다 고 가정 하면,우 리 는 페이지 당 10 개의 제품 을 표시 하 기 를 바 랄 뿐이다.변 수 를 사용 하여 현재 페이지 를 추적 합 니 다.우 리 는 이렇게 페이지 를 처리 할 수 있 습 니 다.

<ul>
 <li v-for='index in 10' :key='index'>
  {{ products[page * 10 + index] }}
 </li>
</ul>

3.순환 중 v-if 사용 하지 않 기
매우 흔히 볼 수 있 는 오 류 는 v-if 를 사용 하여 v-for 순환 의 데 이 터 를 걸 러 내 는 것 입 니 다.비록 이것 은 직관 적 으로 보이 지만,그것 은 v-if 명령 이 아 닌 v-for 를 우선적으로 고려 하 는 커 다란 성능 문 제 를 초래 할 수 있다.
이것 은 구성 요소 가 모든 요 소 를 반복 해서 옮 겨 다 니 는 것 을 의미 하 며,v-if 조건 을 확인 하여 렌 더 링 여 부 를 확인 합 니 다.따라서 실제 조건 이 무엇이든 배열 의 모든 항목 을 옮 겨 다 닐 것 입 니 다.
이러 지 마 세 요.

// BAD CODE!
<ul>
 <li 
  v-for='product in products' 
  :key='product._id' 
  v-if='product.price < 50'
 >
  {{ product.name }}
 </li>
</ul>

4.계산 속성 또는 방법 으로 대체
상기 문 제 를 피하 기 위해 서 는 템 플 릿 의 데 이 터 를 옮 겨 다 니 기 전에 여과 해 야 합 니 다.두 가지 매우 비슷 한 방법 이 있다.

계산 속성 사용

여과 법 사용

이 두 가지 방법 을 빠르게 소개 합 시다.
우선,우 리 는 하나의 계산 속성 만 설정 해 야 합 니 다.이전의 v-if 와 같은 기능 을 얻 기 위해 코드 는 다음 과 같 아야 합 니 다.

<ul>
 <li v-for='products in productsUnderFifty' :key='product._id' >
  {{ product.name }}
 </li>
</ul>

// ...
<script>
 export default {
  data () {
   return {
    products: []
   }
  },
  computed: {
   productsUnderFifty: function () {
    return this.products.filter(product => product.price < 50)
   }
  }
 }
</script>

아래 코드 는 거의 같 지만 사용 방법 은 템 플 릿 의 값 을 방문 하 는 방식 을 바 꾸 었 습 니 다.만약 에 변 수 를 필터 에 전달 하고 싶다 면 방법 이 가장 좋 은 선택 입 니 다.

<ul>
 <li v-for='products in productsUnderPrice(50)' :key='product._id' >
  {{ product.name }}
 </li>
</ul>

// ...

<script>
 export default {
  data () {
   return {
    products: []
   }
  },
  methods: {
   productsUnderPrice (price) {
    return this.products.filter(product => product.price < price)
   }
  }
 }
</script>

5.순환 중 항목 의 인덱스 에 접근
배열 을 옮 겨 다 니 고 모든 요 소 를 방문 하 는 것 외 에 우 리 는 모든 항목 의 색인 을 추적 할 수 있다.
이 를 위해 서 는 항목 뒤에 색인 값 을 추가 해 야 합 니 다.페이지 나 누 기,목록 색인 표시,순위 표시 등에 사용 할 수 있 습 니 다.

<ul>
 <li v-for='(products, index) in products' :key='product._id' >
  Product #{{ index }}: {{ product.name }}
 </li>
</ul>

6.대상 을 옮 겨 다 니 기
지금까지 우 리 는 v-for 를 사용 하여 배열 을 옮 겨 다 니 는 것 만 본 적 이 있 지만,우 리 는 대상 의 키 값 을 쉽게 옮 겨 다 닐 수 있 습 니 다.
접근 요소 의 색인 과 유사 합 니 다.순환 에 다른 값 을 추가 해 야 합 니 다.만약 우리 가 하나의 매개 변수 로 대상 을 옮 겨 다 닌 다 면,우 리 는 모든 항목 을 옮 겨 다 닐 것 이다.
다른 인 자 를 추가 하면 items 와 key 를 얻 을 수 있 습 니 다.세 번 째 인 자 를 추가 하면 v-for 순환 색인 에 도 접근 할 수 있 습 니 다.
우리 가 제품 의 모든 미디어 자원 을 옮 겨 다 녀 야 한다 고 가정 하 자.

<ul>
 <li v-for='(products, index) in products' :key='product._id' >
  <span v-for='(item, key, index) in product' :key='key'>
   {{ item }}
  </span>
 </li>
</ul>

총결산
이 짧 은 글 이 Vue 의 v-for 명령 을 사용 하 는 가장 좋 은 방법 을 가르쳐 주 기 를 바 랍 니 다.
뭐 공부 해요?
원문:https://learnvue.co/2020/02/6-techniques-to-write-better-vuejs-v-for-loops/?utm_source=rss&utm_medium=rss&utm_campaign=6-techniques-to-write-better-vuejs-v-for-loops
두 니 푸
Vue.js 에서 더 좋 은 v-for 순환 을 위 한 6 가지 기 교 를 상세 하 게 설명 하 는 이 글 은 여기까지 입 니 다.Vue.js v-for 순환 에 관 한 더 많은 내용 은 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!