SoFunction
Updated on 2025-04-05

Detailed explanation of v-if and v-for priority instances in Vue3

In vue2, try to avoid using both at the same time

vue official link

whenv-ifandv-forWhen used together,v-forHave av-ifHigher priority.

So, let's give an example to illustrate why it is not recommended

<template>
  <div class="hello">
     <div  v-for="(item,index) in list" v-if="index === 9" :key="item" ></div>
  </div>
</template>
​
<script>
export default {
  data(){
    return {
      list:[1,2,3,4,5,6,7,8,9,10]   //The data to be traversed    }
  }
};
</script>
​
<style scoped>
</style>

The actual operation it has undergone is like this

(function (item,index) {
  if (index===9) {
    return item
  }
})

Therefore, even if we only render a small part of the elements, we have to traverse the entire list every time we re-render, regardless of whether there has been any change.

The reason why this is not recommended is that it is a waste of performance

The recommended improvement solution for Vue2 is also relatively simple, which is to use computational properties to generate the array you want to traverse.

as follows

<template>
  <div class="hello">
    <!-- 2. Then here to loop through the filtered properties -->
     <div  v-for="(item) in ListArr" :key="item" ></div>
  </div>
</template>
​
<script>
export default {
  data(){
    return {
      list:[1,2,3,4,5,6,7,8,9,10]
    }
  },
  computed:{
    //1. Make a good judgment first in computed, the cost of filtering here is much lower than that of v-if    ListArr(){
        return ((_,index) => index === 1)
    }
  }
};
</script>
<style scoped>
</style>

From the perspective of computational cost, filtering in computed attributes will be lower than determining whether it is displayed in the dom.

Changes in vue3

vue official documentation

whenv-ifandv-forWhen used together,v-ifHave av-forHigher priority.

So can we encourage everyone to use this? Obviously not. The official document is still not recommended to use it at the same time. Let's take a look at why

Similarly, we still use the above example for analysis

<template>
  <div class="hello">
     <div  v-for="(item,index) in list" v-if="index === 9" :key="item" ></div>
  </div>
</template>
​
<script>
export default {
  data(){
    return {
      list:[1,2,3,4,5,6,7,8,9,10]   //The data to be traversed    }
  }
};
</script>
<style scoped>
</style>

Because v-if has high priority, the page will not render anything, and the console still reports an error

[Vue warn]: Property "index" was accessed during render but is not defined on instance.

Of course there are some other uses, such as this, which can display data, but there are some Vue warnings

<template>
  <div class="hello">
     <ul>
        <li v-for="(item, index) in list" :key="index" v-if="">
          {{  }}
        </li>
      </ul>
  </div>
</template>
​
<script>
export default {
  data(){
    return {
      list:[
       { name: 'Zhang San', show: false },
       { name: 'Li Si', show: true },
      ]   //The data to be traversed    }
  }
};
</script>
<style scoped>
</style>

This method is not the best, the official recommended way is to move v-for to container elements, such as ul, ol or wrap a layer of template outside

<template>
  <div class="hello">
     <ul>
         <template v-for="(item, index) in list" :key="index">
          <li v-if="">
            {{  }}
          </li>
        </template>
      </ul>
  </div>
</template>
​
<script>
export default {
  data(){
    return {
      list:[
       { name: 'Zhang San', show: false },
       { name: 'Li Si', show: true },
      ]   //The data to be traversed    }
  }
};
</script>
<style scoped>
</style>

But if you want to conditionally skip the execution of the loop, you can place the v-if on the outer element or template.

For example

<template>
  <div class="hello">
     <ul v-if="">
          <li v-for="(item, index) in list" :key="index">
            {{  }}
          </li>
      </ul>
  </div>
</template>
​
<script>
export default {
  data(){
    return {
      list:[
       { name: 'Zhang San', show: false },
       { name: 'Li Si', show: true },
      ]   //The data to be traversed    }
  }
};
</script>
<style scoped>
</style>

in conclusion

  • In vue2, v-for has higher priority than v-if
  • In vue3, v-if has higher priority than v-for
  • Both mixed together are not officially recommended

Supplement: Notes

1. Never use v-if and v-for on the same element at the same time, which will cause performance waste (every rendering will be looped first and then conditional judgment will be made)

2. If this situation is avoided, nest templates on the outer layer (page rendering does not generate dom nodes), perform v-if judgment on this layer, and then perform v-for loops on the inner layer.

<template v-if="isShow">
    <p v-for="item in items">
</template>

3. If the condition occurs inside the loop, you can filter out items that do not need to be displayed in advance through the computed attribute.

computed: {
    items: function() {
      return (function (item) {
        return 
      })
    }
}

Summarize

This is the end of this article about the detailed explanation of v-if and v-for priority in Vue3. For more related content on v-if and v-for priority, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!