v-for/v-if使用時の注意点

v-for: 配列データは循環的にレンダリングできます。その構文は次のとおりです。v-for="item in items"ここで、item各配列要素itemsは配列そのものです。

v-if: 条件に従って要素を動的にレンダリングしたり、レンダリングしなかったりすることができます。その構文は次のとおりです。v-if="isShow"これは、isShow要素をレンダリングするかどうかを示すブール値です。

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{
   
   {item.text}}</li>
    </ul>
    <p v-if="isShow">This is a conditionally rendered element</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ],
      isShow: true
    }
  }
}
</script>

v-for と v-if は要素を指定しません

v-for の優先度が v-if よりも高いため、併用した場合はループレンダリングが実行されてから v-if が判定されます。

これにより、パフォーマンスの問題が発生します。

たとえば、次のコードでは、各 li 要素で v-for と v-if の両方を使用します。

<ul>
  <li v-for="item in items" v-if="item.isActive">
    {
    
    {
    
     item.name }}
  </li>
</ul>

この書き方をすると、li要素ごとに判定してループすることになり、処理量が増えてパフォーマンスが低下する可能性があります。

ノート：

条件がループ内に出現する場合は、計算されたプロパティを使用して最初にフィルターを実行できます。

計算されたプロパティをワンショットフィルターに使用することは、ループ内で条件が発生した場合の問題を軽減する効果的な方法です。これは、計算されたプロパティが、レンダリングのたびに再計算されるのではなく、データが変更されると自動的に更新されるためです。

たとえば、ループ内で v-if を使用して特定の要素の表示を制御すると、レンダリングするたびに条件が再計算されます。対照的に、計算されたプロパティを使用してフィルター処理する場合、データが変更された場合にのみ再計算されます。

サンプルコード:

// Template
<template>
  <ul>
    <li v-for="item in filteredItems">{
   
   { item.name }}</li>
  </ul>
</template>

// JavaScript
data() {
    
    
    return {
    
    
        items: [
        {
    
     name: 'Item 1', show: true },
        {
    
     name: 'Item 2', show: false },
        {
    
     name: 'Item 3', show: true }
        ]
    }
},
    computed: {
    
    
        filteredItems() {
    
    
        	return this.items.filter(item => item.show)
        }
}

おすすめ